多个tab切换时选中的在中间

好久没有写博客了，刚好朋友有需求，就写了个demo,并记录一下以便日后使用

<scroll-view class="scrollx" scroll-with-animation scroll-x bindscroll="bindscroll" scroll-left='{{scrollLeft}}'>

<view class="list_warp">

<view class="list_view" wx:key="{{index}}" wx:for="{{list}}">

<!-- 每个元素绑定一个id,通过它获得该节点的位置信息 -->

<view bindtap="clickTab" id="ele{{index}}" data-index='{{index}}' class="l_text">{{item}}</view>

</view>

</view>

</scroll-view>

 

 

Page({

 

data: {

scrollLeft: 0, //控制scroll-view移动的距离，

screenHalf: '', //屏幕宽度的一半

elewidthHalf: '', //元素宽度的一半

eleLeft: '', //元素距离屏幕左边的距离

afterScrollLeft:'',

list: [

'jquery',

'react',

'node',

'sass',

'php',

'html',

'css',

'js',

'vue',

'ccc',

]

},

//点击切换tab

clickTab(e) {

this.getRect('#ele' + e.target.dataset.index)

},

getRect(ele) {

var that = this;

// wx.createSelectorQuery() .select('#productServe').boundingClientRect() 操作dom,选择#xxx节点的所有位置信息

wx.createSelectorQuery().select(ele).boundingClientRect(function(rect) {

that.setData({

eleLeft: rect.left,

elewidthHalf: rect.width / 2

})

that.moves();

}).exec()

},

// scroll-view 移动触发的事件，可以获得当前scrollLeft的值

bindscroll(e) {

this.setData({

afterScrollLeft: e.detail.scrollLeft

})

},

// 参数计算

moves() {

let temp = this.data

// 变化的距离，元素距离屏幕左边的距离 - 屏幕宽度的一半 + 元素宽度的一半 表示点击元素时变化的距离

let changeMove = temp.eleLeft - temp.screenHalf + temp.elewidthHalf

this.setData({

scrollLeft: this.data.afterScrollLeft + changeMove

})

},

onShow: function() {

let that = this

wx.getSystemInfo({

success: function(res) {

that.setData({

screenHalf: res.screenWidth / 2

})

},

})

},

})

.scrollx{

white-space:nowrap;

width: 100%;

}

.list_warp{

display: flex;

flex-direction: row;

padding-top: 300rpx;

}

.l_text{

color: rgb(235, 135, 135);

width: 240rpx;

text-align: center;

height: 60rpx;

line-height: 60rpx;

border-right: 1px solid #ddd;

}

::-webkit-scrollbar{

width: 0;

height: 0;

}