昨天看虎牙直播,发现导航栏挺有意思,自己也做个玩玩
<view class="tab_list row"> <view class="tab_item center" wx:for=‘{{tab_list}}‘ data-index="{{index}}" bindtap="tab">{{item}}</view> <view class="border_line" style="left: {{border_left}}px; width: {{border_width}}px;"></view> </view>
.tab_list{ position: relative } .tab_item{ width: 20%; height: 40px; font-size: 14px; } .border_line{ position: absolute; bottom: 2px; height: 6px; background: linear-gradient(90deg, #FFA500, #FFD700 ); border-radius: 10px; transition: all .2s; }
// pages/tab/tab.js Page({ /** * 页面的初始数据 */ data: { tab_list: [‘全部‘, ‘推荐‘, ‘LOL‘, ‘户外‘, ‘一起看‘], tab_index: 0, last_index: 0, pos_list: [], border_width: 16, border_left: 0, is_disable:false //禁止点击 }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { this.getPosition(); }, getPosition() { let tab_index = this.data.tab_index, border_width = this.data.border_width, last_index = this.data.last_index; let tab_width2 = border_width / 2; let pos_list = this.data.pos_list; if (!pos_list.length) { const query = wx.createSelectorQuery() query.selectAll(‘.tab_item‘).boundingClientRect() query.exec(res => { let { width } = res[0][0]; this.setData({ border_left: width / 2 - tab_width2, pos_list: res[0] }) }) } else { let current, last; let tab_left = pos_list[tab_index].left, tab_width = pos_list[tab_index].width; let last_left = pos_list[last_index].left, last_width = pos_list[last_index].width; if (tab_index < last_index) {//向左 current = tab_left + tab_width / 2 - tab_width2; last = last_left + last_width / 2 + tab_width2; let width = Math.abs(current - last); //当前和上次的宽度 this.setData({ border_width: width, border_left: tab_left + tab_width / 2 - tab_width2, //向左需要动画过渡 }, () => { setTimeout(() => { this.setData({ border_width, is_disable:false }) }, 200) }) } else { //向右 current = tab_left + tab_width / 2 + tab_width2; last = last_left + last_width / 2 - tab_width2; let width = Math.abs(current - last); this.setData({ border_width: width, }, () => { setTimeout(() => { this.setData({ border_width, border_left: tab_left + tab_width / 2 - tab_width2, is_disable: false }) }, 300) }) } } }, tab(e) { if (this.data.is_disable) return; let index = e.currentTarget.dataset.index; let tab_index = this.data.tab_index; if (index != tab_index) { this.setData({ last_index:tab_index, tab_index: index, is_disable:true }) this.getPosition(); } }, })