快捷導(dǎo)航

微信小程序?qū)崿F(xiàn)左側(cè)滑動導(dǎo)航欄

更新時間：2020年04月08日 10:38:33 作者：online-oliver

這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)左側(cè)滑動導(dǎo)航欄，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了微信小程序?qū)崿F(xiàn)左側(cè)滑動導(dǎo)航欄的具體代碼，供大家參考，具體內(nèi)容如下

左側(cè)滑動導(dǎo)航欄如圖

wxml

<!-- 左側(cè)滾動欄 -->
<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;
}

js

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

更多教程點擊《Vue.js前端組件學(xué)習(xí)教程》，歡迎大家學(xué)習(xí)閱讀。

關(guān)于vue.js組件的教程，請大家點擊專題vue.js組件學(xué)習(xí)教程進行學(xué)習(xí)。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: