18.首页导航模块

• 下首页的导航模块

  
  image.png

• 这个数据是发请求来获取的,先看一下这个借口吧,下面这个公共接口地址,先把他复制,然后在拼接下面的接口的后缀就可以了

  
  image.png

• 公共路径:(https://easy-mock.com/mock/5c1dfd98e8bfa547414a5278/bili)

• (https://easy-mock.com/mock/5c1dfd98e8bfa547414a5278/bili/navList)

• 下载一个postman工具安装,然后将公共路径复制进去

  
  image.png

image.png image.png

• 现在我想先发请求来拿一下这个数据,然后再考虑做一个循环显示的问题,找到我们的index/index.json文件,在data里面先声明一个变量

image.png image.png image.png

• 在微信小程序内部里面,你在发一些外链请求时候,必须要在小程序官网后台配置

  
  image.png
  image.png

image.png image.png image.png image.png

• 需要让他们在一行上显示,并且让他们有一个横向滚动条显示的效果

image.png image.png image.png

• 然后给样式,

  
  image.png

• 你会发现左右拖动不了

  
  image.png

• 这样就可以拖动了

  
  image.png

• 再优化一下字体的颜色(灰色),下边框有一个激活选中的红色的线

• 需要声明一下下划线是红色的,这么一个类

image.png
image.png image.png

• 下面做一个激活选中效果

• 先如下图

  
  image.png

• 到js文件中声明一个变量

  
  image.png

image.png image.png image.png image.png

• index.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    // (被点击的首页导航的菜单的索引)当前点击的时候选中的菜单栏是第几个索引的意思,开始等于一个0
    currentIndexNav:0,
    //首页导航数据
    navList:[]
  },

  //点击首页导航按钮
  activeNav(e){
    // console.log(123);
    //传递参数逻辑
    this.setData({
      currentIndexNav:e.target.dataset.index
    })
  },

  /**
   * 获取首页导航数据
   */
  getNavList(){
    let that=this;
    //利用小程序内置发送请求的方法
    wx.request({
      url:"https://easy-mock.com/mock/5c1dfd98e8bfa547414a5278/bili/navList",
      //请求成功之后,会帮你触发一个回调函数
      success(res){
        // console.log(res);
        if(res.data.code===0){
          that.setData({
            navList:res.data.data.navList
          })
        }
      }
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 1.获取首页导航数据
    this.getNavList();
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  }
})

• index.wxml

<view class="main">
    <!-- 公共头部 -->
    <MyTitle></MyTitle> 
    <!-- 首页导航 -->
    <view class="nav_wrap">
        <!-- 自己滚动区域的组件(小程序自带的) -->    
        <scroll-view class="nav" scroll-x="{{true}}">
            <!-- 因为这个标签是做一个循环生成的,所以做一个循环 -->
            <view bindtap="activeNav" data-index="{{index}}"
             class="nav_item {{index===currentIndexNav?'active':''}}" 
             wx:for="{{navList}}" wx:key="{{index}}">
                {{item.text}}
            </view>
        </scroll-view>
    </view>
</view>

• index.wxss

page{
    color: #666;
}

/* 首页导航 */
.nav_wrap{

}
.nav{
    /* 第一件事,不要因为一个空格而换行 */
    white-space: nowrap;
    /* 加一个padding值 上下5,左右0 */
    padding: 5rpx 0;
}
.nav_item{
    padding: 20rpx 45rpx;
    /* 字体大小 */
    font-size: 30rpx;
    /* 在一行上显示 */
    display: inline-block;
}
.nav_item.active{
    border-bottom: 5px solid #de688b ;
}