本文實例為大家分享了微信小程序?qū)崿F(xiàn)tab左右切換展示的具體代碼，供大家參考，具體內(nèi)容如下
為花山等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù)，及花山網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為網(wǎng)站設(shè)計、成都網(wǎng)站制作、花山網(wǎng)站設(shè)計，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會得到認(rèn)可，從而選擇與我們長期合作。這樣，我們也可以走得更遠(yuǎn)！
分析
1、設(shè)置data-current屬性用于：點擊當(dāng)前項時，通過點擊事件swichNav中處理e.dataset.current取到點擊的目標(biāo)值。
2、swiper組件的current組件用于控制當(dāng)前顯示哪一頁
3、swiper組件綁定change事件switchTab，通過e.detail.current拿到當(dāng)前頁
wxml:
------------------------------------------------ {{tabItem.title}} {{tabItem.text}} {{tabItem.text}} ￥ {{tanItem.cost}}
JS
重慶分公司
重慶分公司
Page ({
const app = getApp()
data: {
recordMian: [
{
title: "插畫藝術(shù)"
},
{
title: "工藝作品"
},
{
title: "服裝藝術(shù)"
},
{
title: "三維建模"
},
],
tabContent: [
{
title: "臺燈臥室床頭 簡約現(xiàn)代書房 北歐宜家創(chuàng)意裝飾個性圓球臺燈床頭燈",
text: "臺燈",
cost: "1255",
imgUrl: "http://img.weiye.me/zcimgdir/album/file_59b8f7b66ba7f.jpg",
},
{
title: "雪域冰雪天地8寸牛乳芝士蛋糕",
text: "蛋糕",
cost: "15",
imgUrl: "http://img.weiye.me/zcimgdir/album/file_59b8f7b66ba7f.jpg",
},
],
currentTab: 0,
navScrollLeft: 0
},
// 事件處理函數(shù)
onLoad: function() {
// 控制record-box隨鼠標(biāo)切換調(diào)整位置
if (app.globalData.userInfo) {
this.setData({
userInfo: app.globalData.userInfo,
hasUserInfo: true
})
} else if (this.data.canIUse) {
app.userInfoReadyCallback = res => {
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
}
else {
wx.getUserInfo({
success: res => {
app.globalData.userInfo = res.userInfo
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
})
}
wx.getSystemInfo({
success: (res) => {
this.setData({
pixelRatio: res.pixelRatio,
windowHeight: res.windowHeight,
windowWidth: res.windowWidth
})
}
})
},
// 滑動事件
// 點擊標(biāo)題切換當(dāng)前頁時改變樣式
switchNav(event) {
var cur = event.currentTarget.dataset.current;
if (this.data.currentTab == cur) {
return false;
} else {
this.setData({
currentTab: cur
})
}
},
// 滾動切換標(biāo)簽樣式
switchTab(event) {
var cur = evnet.detail.current;
var singeNavWidth = this.data.windowWidth / 5;
this.setData({
currentTab: cur,
navScrollLeft: (cur - 2) * singleNavWidth
});
}
})效果圖：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
