微信 - 写导航栏

image.png

<view class='nav_wrap'>
    <scroll-view class='nav'>
        <view bindtap="activeNav" data-index="{{index}}" class="nav_item {{index === curIndexNav?'active':''}}" wx:for="{{navList}}" wx:key="{{index}}">
            {{item.text}}
        </view>
    </scroll-view>
</view>

---

.nav_item.active {
    border-bottom: 4rpx solid red;
}

---

// 页面的初始数据
data: {
    navList: [],
    // 默认导航栏第一个cur
    curIndexNav: 0,
},
activeNav(e){
    this.setData({
        curIndexNav:e.target.dataset.index
    })
},
/**
 * 1.获取首页的导航栏数据
 */
getNavList() {
    let that=this;
    // 利用小程序内置发送请求的方法
    wx.request({
        url: 'http://easy-mock.com/mock/5c1dfd98e8bfa547414a5278/bili/navlist',
        success(res){
            if(res.data.code===0){
                that.setData({
                    navList: res.data.data.navList
                })
            }
        }
    })
},
/**
 * 生命周期函数--监听页面加载
 */
onLoad: function(options) {
    // 1.获取页面导航数据
    this.getNavList();
},