微信小程序实现左侧滑动导航栏

2024-04-08 03:40:43

本文实例为大家分享了微信小程序实现左侧滑动导航栏的具体代码，供大家参考，具体内容如下

左侧滑动导航栏如图

wxml

<!-- 左侧滚动栏 -->
<view class='under_line'></view>
<view style='float: left' class='left'>
 <scroll-view scroll-y scroll-with-animation scroll-left="{{scrollLength}}" class='scrollY' style='height: {{winHeight}}px'>
 <view class='all clear'>
 <block wx:key="lists" wx:for="{{lists}}">
 <view bindtap='jumpIndex' data-menuindex='{{index}}'>
  <view class='text-style'>
  <text class="{{indexId==index?'active1':''}}">{{item}}</text>
  <text class="{{indexId==index?'active':''}}"></text>
  </view>
 </view>
 </block>
 </view>
 </scroll-view>
</view>

wxss

.under_line{
 width: 100%;
 border-top: 1rpx solid #efefef;
}
.scrollY {
 width: 200rpx;
 position: fixed;
 left: 0;
 top: 0;
 border-right: 1rpx solid #efefef;
}

.left {
 border-top: 1rpx solid #efefef;
 border-right: 1rpx solid #efefef;
}

.text-style {
 width: 200rpx;
 height: 140rpx;
 line-height: 140rpx;
 text-align: center;
 font-size: 34rpx;
 font-family: PingFangSC-Semibold;
 color: rgba(51, 51, 51, 1);
}

.active1 {
 color: #85d1fd;
}

.active {
 display: block;
 width: 50rpx;
 height: 6rpx;
 background: #85d1fd;
 position: relative;
 left: 75rpx;
 bottom: 30rpx;
}

Page({

 /**
 * 页面的初始数据
 */
 data: {
 lists: [
 "标题1", "标题二", "标题三", "标题四", "标题五", "标题六", "标题七", "标题八", "标题九", "标题十", "标题十一", "标题十二"
 ],
 indexId: 0,
 },
 // 左侧点击事件
 jumpIndex(e) {
 let index = e.currentTarget.dataset.menuindex
 let that = this
 that.setData({
 indexId: index
 });
 },
 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function(options) {
 var that = this
 wx.getSystemInfo({
 success: function(res) {
 that.setData({
  winHeight: res.windowHeight
 });
 }
 });
 },

 /**
 * 生命周期函数--监听页面初次渲染完成
 */
 onReady: function() {

 },

 /**
 * 生命周期函数--监听页面显示
 */
 onShow: function() {

 },

 /**
 * 生命周期函数--监听页面隐藏
 */
 onHide: function() {

 },

 /**
 * 生命周期函数--监听页面卸载
 */
 onUnload: function() {

 },

 /**
 * 页面相关事件处理函数--监听用户下拉动作
 */
 onPullDownRefresh: function() {

 },

 /**
 * 页面上拉触底事件的处理函数
 */
 onReachBottom: function() {

 },

 /**
 * 用户点击右上角分享
 */
 onShareAppMessage: function() {

 }
})

更多教程点击《Vue.js前端组件学习教程》，欢迎大家学习阅读。

关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

微信小程序tab切换可滑动切换导航栏跟随滚动实现代码

简介看到今日头条小程序页面可以滑动切换,而且tab导航条也会跟着滚动,点击tab导航,页面滑动,切导航栏也会跟着滚动,就想着要怎么实现这个功能像商城类商品类目如果做成左右滑动切换类目用户体验应该会好很多,我这里只是一个小demo,没有怎么去考虑数据的问题,主要是想着去实现这么个功能,有可能后期引入数据后会出现问题,欢迎提出互相讨论解决过程 1.在想要实现这个问题的时候找了不少别人的博客看,主体页面布局方面是比较统一的,tab导航栏使用<scroll-view>标签,内容使用<swi
详解微信小程序胶囊按钮返回|首页自定义导航栏功能

项目代码:https://github.com/Shay0921/header-navbar.git 在小程序中,从转发出来的小程序消息卡片进入,因为页面栈中只有一个,所以不会出现返回按钮,对于一些电商平台来说,当商品被转发后会很影响客户查看其它产品和首页,这时候就需要使用自定义导航栏自己写一个"胶囊按钮".如下图所示: 从别的页面点到商品页时会有返回和首页按钮: 当从分享页进入到商品页时,因为页面栈只有一个,所以只有首页按钮: 首先我们需要如何开启自定义导航栏,查看手册后会发现一个页
微信小程序仿今日头条导航栏滚动解析

项目需要,做一个和今日头条一样的导航栏,可以横行滚动,幸好再weui里面看到了类似的例子地址:https://weui.shanliwawa.top/demo/js4.html,使用iscroll-lite.j实现,weui自己封装了一层,vue中实现代码: <div id="tab-tip" class="container"> <div id="tagnav" class="weui-navigator weui
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)

本文实例讲述了微信小程序MUI导航栏透明渐变功能.分享给大家供大家参考,具体如下: 导航栏透明渐变效果实现原理 1. 利用position:absolute在导航下定位一个view作为背景渐变使用; 2. 通过改变改view的opacity来实现透明渐变. WXML  <view style="height:100%;position:fixed;width:100%;"> <scroll-v
微信小程序教程系列之设置标题栏和导航栏（7）

微信小程序标题栏和导航栏的设置方法,具体内容如下设置标题栏标题栏window 在app.json文件里面,通过window对象里面的属性进行设置示例: app.json: 运行: 设置导航栏导航栏TabBar 如果我们的小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),那么我们可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面. Tip: 通过页面跳转(wx.navigateTo)或者页面重定向(wx.redirect
微信小程序实现的动态设置导航栏标题功能示例

本文实例讲述了微信小程序实现的动态设置导航栏标题功能.分享给大家供大家参考,具体如下: 场景当从一个分类列表页面进入到一个详情页面的时候,由于这个详情页面是公用的,为了区分页面,就会设置该页面的导航用以区分.就需要开发者在页面加载的时候进行动态设置导航标题! 实现API wx.setNavigationBarTitle(OBJECT) 语法 wx.setNavigationBarTitle({ title: '当前页面', //页面标题 success: () => {}, //接口调用成功的
微信小程序点击顶部导航栏切换样式代码实例

这篇文章主要介绍了微信小程序点击顶部导航栏切换样式代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下类似这样的效果 <view class='helpCateList'>  <scroll-view class='scroll-view' scroll-x="true"> <view class="item-content" wx:key=&qu
微信小程序顶部导航栏滑动tab效果

小程序商品展示需要导航栏的商品分类进行滑动,供大家参考,具体内容如下效果图: 首先是滑动的效果: <scroll-view scroll-x="true" style="width: 100%;white-space:nowrap;"> </scroll-view> 小程序使用</scroll-view>,横向移动即可 WXML:这里面我将导航栏显示类目定义为5个,每个20%,当超出5个分类,也就是index>4的时候,导
微信小程序实现左侧滑动导航栏

本文实例为大家分享了微信小程序实现左侧滑动导航栏的具体代码,供大家参考,具体内容如下左侧滑动导航栏如图 wxml  <view class='under_line'></view> <view style='float: left' class='left'> <scroll-view scroll-y scroll-with-animation scroll-left="{{scrollLength}}&quo
微信小程序开发之顶部导航栏实例代码

微信小程序开发之顶部导航栏需求:顶部导航栏效果图: wxml:  <view class="navbar"> <text wx:for="{{navbar}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" wx:key="unique" bindtap=
微信小程序实现横向滚动导航栏效果

1.page.wx.css内容如下: <view class='classify_list'> <view class="classify">分类1</view> <view class="classify">分类1</view> <view class="classify">分类1</view> <view class="classify&quo
微信小程序自定义navigationBar顶部导航栏适配所有机型（附完整案例）

前言 navigationBar相信大家都不陌生把?今天我们就来说说自定义navigationBar,把它改变成我们想要的样子(搜索框+胶囊.搜索框+返回按钮+胶囊等). 思路隐藏原生样式获取胶囊按钮.状态栏相关数据以供后续计算根据不同机型计算出该机型的导航栏高度,进行适配编写新的导航栏引用到页面正文一.隐藏原生的navigationBar window全局配置里有个参数:navigationStyle(导航栏样式),default=默认样式,custom=自定义样式. "wind
微信小程序实战之顶部导航栏（选项卡）（1）

本文实例为大家分享了微信小程序顶部导航栏的具体代码,供大家参考,具体内容如下需求:顶部导航栏效果图: wxml:  <view class="navbar"> <text wx:for="{{navbar}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" wx:key=&qu
微信小程序实战之顶部导航栏(选项卡)(1)

本文实例为大家分享了微信小程序顶部导航栏的具体代码,供大家参考,具体内容如下需求:顶部导航栏效果图: wxml:  <view class="navbar"> <text wx:for="{{navbar}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" wx:key=&qu
微信小程序实现左侧导航栏

本文实例为大家分享了微信小程序实现左侧导航栏的具体代码,供大家参考,具体内容如下 wxml <view class="content"> <view class='left'> <view class="{{flag==0?'select':'normal'}}" id='0' bindtap='switchNav'>8:00-9:00</view> <view cla
微信小程序tab左右滑动切换功能的实现代码

效果图: 一.简介自己的小程序需要实现这样的功能 1.核心思想 swiper 和scroll-view共用两个变量currentTab navScrollLeft,当点击nav或者滑动swiper时设置两个变量的值为当前的index 二.实现 tab导航栏使用<scroll-view>标签,内容使用<swiper> 1.wxml实现 <view class="container">  <!-- sc

微信小程序实现左侧滑动导航栏

相关推荐

随机推荐