话不多说,微信小程序中:
<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了,也是在复习吧,罪过