程序：微信小程序左侧栏滑动怎么实现

微信小程序左边栏滑动怎样实现

微信小程序左边栏滑动的方法：1.创建微信小程序项目；2.在index.wxml文件中添加页面设计代码；3.在index.wxss文件中添加样式代码；4.在index.js文件中添加实现文件滑动效果的代码；5.保存编辑的代码并进行调试便可。

具体操作步骤以下：

1、首先在创建一个微信小程序项目。

2、在pages包下的index目录中index.wxml文件里添加实现左边栏菜单的页面设计代码。

<!--左边转动栏-->
<viewclass='under_line'></view>
<viewstyle='float:left'class='left'>
<scroll-viewscroll-yscroll-with-animationscroll-left="{{scrollLength}}"class='scrollY'style='height:{{winHeight}}px'>
<viewclass='allclear'>
<blockwx:key="lists"wx:for="{{lists}}">
<viewbindtap='jumpIndex'data-menuindex='{{index}}'>
<viewclass='text-style'>
<textclass="{{indexId==index?'active1':''}}">{{item}}</text>
<textclass="{{indexId==index?'active':''}}"></text>
</view>
</view>
</block>
</view>
</scroll-view>
</view>

3、在pages包下的index目录中index.wxss文件添加样式代码，美化页面布局。

.under_line{
width:100%;
border-top:1rpxsolid#efefef;
}
.scrollY{
width:200rpx;
position:fixed;
left:0;
top:0;
border-right:1rpxsolid#efefef;
}
.left{
border-top:1rpxsolid#efefef;
border-right:1rpxsolid#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;
}

4、在pages包下的index目录中index.js文件里添加实现转动效果的代码。

Page({
/**
*页面的初始数据
*/
data:{
lists:[
"标题1","标题二","标题三","标题四","标题五","标题六","标题七","标题八","标题九","标题十","标题十一","标题十二"
],
indexId:0,
},
//左边点击事件
jumpIndex(e){
letindex=e.currentTarget.dataset.menuindex
letthat=this
that.setData({
indexId:index
});
},
/**
*生命周期函数--监听页面加载
*/
onLoad:function(options){
varthat=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(){
}
})

5、最后保存编辑的代码进行调试，保存快捷键【Ctrl+S】。

在开发工具左边便可看到设计效果。

本文来源：https://www.yuntue.com/post/70033.html | 云服务器网，转载请注明出处！