1、设置data-current属性用于：点击当前项时，通过点击事件swichNav中处理e.dataset.current取到点击的目标值。
2、swiper组件的current组件用于控制当前显示哪一页
3、swiper组件绑定change事件switchTab，通过e.detail.current拿到当前页
wxml:
<view> <view> <scroll-view scroll-x="true" srcoll-left="{{navScrollLeft}}" srcoll-width-animation="{{true}}"> <block wx:for="{{recordMain}}" wx:for-index="idx" wx:for-item="navItem" wx:key="idx"> <view data-current="{{idx}}" bindtap="switchNav"> <label>{{navItem.text}}</label> </view> </block> </scroll-view> </view> </view> ------------------------------------------------ <view> <swiper current="{{currentTab}}" duration="300" bindchange="switchTab"> <swiper-item wx:for="{{[0,1,2,3]}}" wx:for-item="tabItem" wx:for-index="idx" wx:key="idx"> <block wx:for="{{tabContent}}" wx:for-item="tabItem" wx:key=" "> <view bindtap="navigateUrl" data-url="/pages/index/index"> <view> <view> <view> <image src="https://www.jb51.net/{{tabItem}}" mode="widthFix"></image> </view> </view> <view> <view> <view>{{tabItem.title}}</view> <view> <laber>{{tabItem.text}}</laber> <laber>{{tabItem.text}}</laber> </view> </view> <view> <view>￥<laber>{{tanItem.cost}}</laber></view> </view> </view> </view> </view> </block> </swiper-item> </swiper> </view>
JS
Page ({ const app = getApp() data: { recordMian: [ { title: "插画艺术" }, { title: "工艺作品" }, { title: "服装艺术" }, { title: "三维建模" }, ], tabContent: [ { title: "台灯卧室床头 简约现代书房 北欧宜家创意装饰个性圆球台灯床头灯", 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 }, // 事件处理函数 onLoad: function() { // 控制record-box随鼠标切换调整位置 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 }) } }) }, // 滑动事件 // 点击标题切换当前页时改变样式 switchNav(event) { var cur = event.currentTarget.dataset.current; if (this.data.currentTab == cur) { return false; } else { this.setData({ currentTab: cur }) } }, // 滚动切换标签样式 switchTab(event) { var cur = evnet.detail.current; var singeNavWidth = this.data.windowWidth / 5; this.setData({ currentTab: cur, navScrollLeft: (cur - 2) * singleNavWidth }); } })
效果图：
