微信小程序开发动态横向导航模板快速开发教程
使用scroll-view组件，可实现横向滚动功能。scroll-view内包含一个动态的view列表，代表导航的每一项，导航要接收动态数组，然后使用列表展示。使用模板技术做到可复用。
按照思路，先要做个template。
新建一个wxml文件：navbar.wxml
{{currentTab==item.id ? 'active' : ''}} bindtap=navbarTap>{{item.name}}
再建相应的wxss文件：navbar.wxss
.navbar{
background: #eeeeee;
white-space: nowrap;
}
.navbar .item{
margin: 20rpx;
display: inline-block;
}
.navbar .item.active{
color: #0000ff;
font-weight:800;
}
这样一个导航模板就创建好了。
接着在自己的页面中使用这个模板。
建议页面：index
在index.wxml中使用模板：
这里要注意src的路径要找对，data参数名称也要与模板里一致。
接着在index.wxss中使用模板样式：
@import /template/navbar.wxss;
引入这么一句就行了。
然后在index.js中绑定数据：
Page({
/**
* 页面的初始数据
*/
data: {
menus: [
{ id:0, name: '水果' },
{ id:1, name: '水果' },
{ id:2, name: '一线海景' },
{ id:3, name: '水果' },
{ id:4, name: '水果' },
{ id:5, name: '一线海景' },
{ id: 6, name: '一线海景' },
{ id: 7, name: '水果' },
{ id: 8, name: '水果' },
{ id: 9, name: '一线海景' }
],
currentTab: 0
},
navbarTap: function (e) {
this.setData({
currentTab: e.currentTarget.id
});
console.log(e);
}
})
运行结果：
相关资讯： 微信小程序 微信小程序开发教程
标签：
