小程序实现一个联动的效果，具体效果看图。
图片.png
图片.png
上方是一个可滚动的标签栏。下面也是可以滚动的内容区。点击上方标签栏，下方内容跟着切换到响应的界面。下面滚动时候，上面的标签栏也跟随切换选中效果。
上代码：
wxml：
<view class='top_bottomView'>
<scroll-view scroll-x class="scroll-x" scroll-left="{{navScrollLeft}}" scroll-with-animation="{{true}}">
<block wx:for="{{list}}" wx:key="{{index}}">
<view class="view-item {{clickNumber==index?'item-active':''}}" bindtap='centerTap'>
{{item}}
</view>
</block>
</scroll-view>
<view class='top_rightView'>
<image src='../../image/home/a1_icon_flpd@2x.png' class='top_rightImage'></image>
</view>
</view>
<!-- 内容区 -->
<swiper style="height:1100rpx" bindchange='changeSwipe' current='{{clickNumber}}'>
<swiper-item wx:for="{{list}}" wx:key="index">
<!-- <include src="../home/jingxuan.wxml" /> -->
<view class='test-class'>{{list[index]}}</view>
</swiper-item>
</swiper>
js:
const app = getApp()
Page({
data: {
list:['精选','新闻','电影','电视剧','综艺','少儿','体育','音乐','游戏'],
clickNumber:0,
},
//点击上方文字 切换
centerTap:function(event) {
//点击的偏移量
console.log(event);
var cur = event.detail.x;
console.log(cur);
//每个tab选项宽度占15%
var singleNavWidth = wx.getSystemInfoSync().windowWidth * 12 / 100;
console.log(singleNavWidth);
this.setData({
clickNumber: parseInt(cur / singleNavWidth)
})
},
changeSwipe:function(event) {
console.log(event);
var type =
event.detail.current;
this.setData({
clickNumber: type
});
},
onLoad: function () {
},
})
wxss：
.top_bottomView {
display: flex;
}
.scroll-x {
height: 62rpx;
width: 90%;
background: #ec4c3d;
white-space: nowrap;
/* display: flex;i */
box-sizing: border-box;
overflow: hidden;
}
/* 隐藏scrollbar */
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
.view-item {
width: 12%;
/* height: 62rpx; */
display: inline-block;
text-align: center;
font-size: 25rpx;
color: #fff;
opacity: 0.6;
}
.item-active {
color: #fff;
opacity: 1;
font-size: 32rpx;
}
.top_rightView {
position: relative;
background: #ec4c3d;
width: 10%;
height: 62rpx;
right: 0;
}
.top_rightImage {
position: absolute;
left: 20rpx;
top: 20rpx;
height: 32rpx;
width: 32rpx;
}
主要思想就是利用一个int值来记录当前的index，当滚动swiper或者点击scroll-view上的标签时，改变这个index，从而达到上方的选中效果和下面的内容页同步。
有几个注意点
怎么去计算scroll-view当前点击的第几个标签
当触发scroll-view的点击事件，通过参数event可以获取好多参数，但是由于布局的原因，无法拿到当前的index，所以我只能让每个标签的宽度一定，是屏幕宽度的百分之十四，通过获取当前点击位置的x值去计算。
swiper的高度是固定的，要去设定他的高度。
对我来说，没有前端基础，所以上手小程序一开始wxss布局上有很大的问题，好多属性看的一脸懵逼。现在迫于小程序赶工期，所以只能多看一些成品源码，囫囵吞枣去照搬硬套。等闲下来要完整系统的去过一遍h5.
