⼩程序实现左侧滑动导航栏本⽂实例为⼤家分享了⼩程序实现左侧滑动导航栏的具体代码，供⼤家参考，具体内容如下左侧滑动导航栏如图
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;
js导航栏下拉菜单width: 50rpx;
height: 6rpx;
background: #85d1fd;
position: relative;
left: 75rpx;
bottom: 30rpx;
}
js
Page({
/
**
* 页⾯的初始数据
*/
data: {
lists: [
"标题1", "标题⼆", "标题三", "标题四", "标题五", "标题六", "标题七", "标题⼋", "标题九", "标题⼗", "标题⼗⼀", "标题⼗⼆" ],
indexId: 0,
},
// 左侧点击事件
jumpIndex(e) {
let index = e.uindex
let that = this
that.setData({
indexId: index
});
},
/**
* ⽣命周期函数--监听页⾯加载
*/
onLoad: function(options) {
var that = this
success: function(res) {
that.setData({
winHeight: res.windowHeight
});
}
});
},
/**
* ⽣命周期函数--监听页⾯初次渲染完成
*/
onReady: function() {
},
/**
* ⽣命周期函数--监听页⾯显⽰
*/
onShow: function() {
},
/**
* ⽣命周期函数--监听页⾯隐藏
*/
onHide: function() {
},
/
**
* ⽣命周期函数--监听页⾯卸载
*/
onUnload: function() {
},
/**
* 页⾯相关事件处理函数--监听⽤户下拉动作
*/
onPullDownRefresh: function() {
},
/**
* 页⾯上拉触底事件的处理函数
*/
onReachBottom: function() {
},
/**
* ⽤户点击右上⾓分享
*/
onShareAppMessage: function() {
}
})
更多教程点击《》，欢迎⼤家学习阅读。
关于vue.js组件的教程，请⼤家点击专题进⾏学习。
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。