微信小程序?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: [ "標(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è)點擊事件 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í)教程進(jìn)行學(xué)習(xí)。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
正則中的回溯定義與用法分析【JS與java實現(xiàn)】
這篇文章主要介紹了正則中的回溯定義與用法,結(jié)合實例形式分析了回溯的概念、功能并提供了JS與java實現(xiàn)方法,需要的朋友可以參考下2016-12-12JavaScript html5 canvas繪制時鐘效果(二)
這篇文章主要介紹了JavaScript html5繪制時鐘效果的相關(guān)資料,使用HTML5的canvas標(biāo)簽和Javascript腳本,模擬顯示了一個時鐘,感興趣的小伙伴們可以參考一下2016-03-03javascript驗證只能輸入數(shù)字和一個小數(shù)點示例
使用javascript限制只能輸入數(shù)字和一個小數(shù)點,在某些情況下還是比較使用的,下面有個不錯的示例,感興趣的朋友可以參考下2013-10-10微信小程序?qū)崿F(xiàn)傳遞多個參數(shù)與事件處理
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)傳遞多個參數(shù)與事件處理,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08JavaScript 類型轉(zhuǎn)換的詳細(xì)實現(xiàn)
本文主要介紹了JavaScript 類型轉(zhuǎn)換的詳細(xì)實現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02