做了个简单的双向切换效果
效果 : 点击上面的菜单栏可以切换相应的内容,滑动内容的时候,菜单栏也会跟着切换。
<view class="my-order">
<view class="{
{current == index ? 'change': ' '}}" wx:for="{
{title}}" data-index="{
{index}}" bindtap='change'>{
{item}}
<view></view>
</view>
</view>
<swiper current="{
{current}}" bindchange='swiperChange'>
<swiper-item wx:for="{
{order}}">
<view class="all">
</view>
</swiper-item>
</swiper>
.my-order{
width: 750rpx;
height: 50rpx;
border-bottom: 10rpx solid #f0f0f0;
display: flex;
justify-content: space-around;
align-items: center;
font-size: 30rpx;
}
.change view{
width: 50%;
border-bottom: 1rpx solid #b88f64;
padding-bottom: 10rpx;
margin-left: 20rpx;
}
.all{
width:710rpx;
height: 297rpx;
margin: 20rpx auto;
background-color: pink;
}
Page({
/**
* 页面的初始数据
*/
data: {
title: ["我要", "天天", "开心", "哦~"],
current: 0,
index: 0,
id: 0,
order:[1,2,3,4]
},
change: function (e) {
this.setData({
current: e.currentTarget.dataset.index,
})
},
swiperChange(e) {
let current = e.detail.current;
this.setData({
current: current,
})
console.log(current)
},
})
转载 https://blog.csdn.net/weixin_42886276/article/details/81838901