話不多說,微信小程序中:
<view wx:for="{{navTabs}}" wx:key="index" class="tab-item {{currentTab == index ? 'active' : ''}}" data-current="{{index}}" bindtap="swichNav">
{{item}}
</view>
data: {
selectPrjName: null,
selectPrjId: null,
winHeight: "",//窗口高度
currentTab: 0, //預設當前項的值
scrollLeft: 0, //tab標題的滾動條位置
navTabs: ["實時", '實控', '歷詢', '歷警', '項置', '視頻','其他']
},
// 點擊標題切換當前頁時改變樣式
swichNav: function (e) {
var cur = e.currentTarget.dataset.current;
this.setData({
currentTab: e.currentTarget.dataset.current
})
},
//判斷當前滾動超過一屏時,設置tab標題滾動條。
checkCor: function () {
if (this.data.currentTab > 4) {
this.setData({
scrollLeft: 300
})
} else {
this.setData({
scrollLeft: 0
})
}
},
打印一下結果:
而在mpvue中:
<view v-for="(item,index) in navTabs" :key="index" class="tab-item currentTab == index ? 'active' : ''" @click="swichNav(index)">{{item}}</view>
methods: {
handleChangeScroll(detail) {
this.current_scroll = detail.mp.detail.key;
},
swichNav(index) {
console.log(index);
// this.setData({
// currentTab: e.currentTarget.dataset.current
// })
},
//判斷當前滾動超過一屏時,設置tab標題滾動條。
checkCor() {
if (this.currentTab > 4) {
this.scrollLeft = 300;
} else {
this.scrollLeft = 0;
}
},
},
比如說我要獲取下標(索引值),我不能像前面那樣直接data-key={{value}},然後在對應的點擊事件裏面打印事件對象e,往下找就有。此處我們可以通過v-for遍歷,並在對應的點擊事件裏面直接帶上index,方法裏面index作爲形參即可獲取索引 。
打印一下:
說明一下:我是好久沒接觸vue了,也是在複習吧,罪過