微信小程序组件 滚动导航
JS
data: {
// 初始化滑动条数据
menuIndex:0,
// 每个菜单的宽度
onlyWidth: 70,
// 右侧的margin
marginWidth:10,
// 菜单总长
menuWidth:0,
lists:[
{ list: 'a1' },
{ list: 'a2' },
{ list: 'a3' },
{ list: 'a4' },
{ list: 'a5' },
{ list: 'a6' },
{ list: 'a7' }
],
},
jumpIndex:function(e){
var menuIndex = (e.currentTarget.dataset.menuindex-1)*80;
this.setData(
{menuIndex:menuIndex}
)
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
let that=this;
let lists = this.data.lists;
let onlyWidth=this.data.onlyWidth;
let marginWidth=this.data.marginWidth;
let menuWidth = lists.length * (onlyWidth + marginWidth) - marginWidth;
that.setData({
menuWidth: menuWidth
})
},
//-----------------------------------------------------------------------------------------
wxml
<view>
<scroll-view scroll-x scroll-with-animation scroll-left="{{menuIndex}}" >
<view class='all' >
<block wx:key="lists" wx:for="{{lists}}">
<view bindtap='jumpIndex' class='menu' data-menuindex='{{index}}'>{{item.list}}</view>
</block>
</view>
</scroll-view>
</view>
//-----------------------------------------------------------------------------------------
.all{
display: flex;
flex-direction: row;
overflow: hidden;
}
.all .menu:last-child{
margin-right: 0;
}
.menu{
width: 70px;
height:40px;
background-color:rebeccapurple;
border-radius: 3px;
margin-right: 10px;
}
.hehe{
width: 200rpx;
height: 100rpx;
background-color:red;
}