本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)左側(cè)滑動(dòng)導(dǎo)航欄的具體代碼，供大家參考，具體內(nèi)容如下
創(chuàng)新互聯(lián)建站，專注為中小企業(yè)提供官網(wǎng)建設(shè)、營銷型網(wǎng)站制作、響應(yīng)式網(wǎng)站開發(fā)、展示型成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)等服務(wù)，幫助中小企業(yè)通過網(wǎng)站體現(xiàn)價(jià)值、有效益。幫助企業(yè)快速建站、解決網(wǎng)站建設(shè)與網(wǎng)站營銷推廣問題。
左側(cè)滑動(dòng)導(dǎo)航欄如圖
wxml
{{item}}
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è)點(diǎn)擊事件
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)聽用戶下拉動(dòng)作
*/
onPullDownRefresh: function() {
},
/**
* 頁面上拉觸底事件的處理函數(shù)
*/
onReachBottom: function() {
},
/**
* 用戶點(diǎn)擊右上角分享
*/
onShareAppMessage: function() {
}
})更多教程點(diǎn)擊《Vue.js前端組件學(xué)習(xí)教程》，歡迎大家學(xué)習(xí)閱讀。
關(guān)于vue.js組件的教程，請大家點(diǎn)擊專題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
