微信小程序组件 滚动导航

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}}" style="height: 100px; width:100%;">

<view id='#haha' class='all' style='width:{{menuWidth}}px;'>

<block wx:key="lists" wx:for="{{lists}}">

<view id="#a{{index}}" 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;

}