微信小程序左側(cè)欄滑動(dòng)怎么實(shí)現(xiàn)

微信小程序左側(cè)欄滑動(dòng)的方法：1.創(chuàng)建微信小程序項(xiàng)目；2.在index.wxml文件中添加頁(yè)面設(shè)計(jì)代碼；3.在index.wxss文件中添加樣式代碼；4.在index.js文件中添加實(shí)現(xiàn)文件滑動(dòng)效果的代碼；5.保存編輯的代碼并進(jìn)行調(diào)試即可。

具體操作步驟如下：

1、首先在創(chuàng)建一個(gè)微信小程序項(xiàng)目。

2、在pages包下的index目錄中index.wxml文件里添加實(shí)現(xiàn)左側(cè)欄菜單的頁(yè)面設(shè)計(jì)代碼。

<!-- 左側(cè)滾動(dòng)欄 -->
<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>

3、在pages包下的index目錄中index.wxss文件添加樣式代碼，美化頁(yè)面布局。

.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;
}

4、在pages包下的index目錄中index.js文件里添加實(shí)現(xiàn)滾動(dòng)效果的代碼。

Page({
 
  /**
   * 頁(yè)面的初始數(shù)據(jù)
   */
  data: {
    lists: [
      "標(biāo)題1", "標(biāo)題二", "標(biāo)題三", "標(biāo)題四", "標(biāo)題五", "標(biāo)題六", "標(biāo)題七", "標(biāo)題八", "標(biāo)題九", "標(biāo)題十", "標(biāo)題十一", "標(biāo)題十二"
    ],
    indexId: 0,
  },
  // 左側(cè)點(diǎn)擊事件
  jumpIndex(e) {
    let index = e.currentTarget.dataset.menuindex
    let that = this
    that.setData({
      indexId: index
    });
  },
  /**
   * 生命周期函數(shù)--監(jiān)聽頁(yè)面加載
   */
  onLoad: function(options) {
    var that = this
    wx.getSystemInfo({
      success: function(res) {
        that.setData({
          winHeight: res.windowHeight
        });
      }
    });
  },
 
  /**
   * 生命周期函數(shù)--監(jiān)聽頁(yè)面初次渲染完成
   */
  onReady: function() {
 
  },
 
  /**
   * 生命周期函數(shù)--監(jiān)聽頁(yè)面顯示
   */
  onShow: function() {
 
  },
 
  /**
   * 生命周期函數(shù)--監(jiān)聽頁(yè)面隱藏
   */
  onHide: function() {
 
  },
 
  /**
   * 生命周期函數(shù)--監(jiān)聽頁(yè)面卸載
   */
  onUnload: function() {
 
  },
 
  /**
   * 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作
   */
  onPullDownRefresh: function() {
 
  },
 
  /**
   * 頁(yè)面上拉觸底事件的處理函數(shù)
   */
  onReachBottom: function() {
 
  },
 
  /**
   * 用戶點(diǎn)擊右上角分享
   */
  onShareAppMessage: function() {
 
  }
})

5、最后保存編輯的代碼進(jìn)行調(diào)試，保存快捷鍵【Ctrl+S】。

在開發(fā)工具左側(cè)即可看到設(shè)計(jì)效果。