18.首页导航模块
2019-08-13 本文已影响0人
星chen
-
下首页的导航模块
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 ;
}
