自定义组件实现tab栏效果
1.找到列表页面的js ,把标题的数据写到父组件中,在data中进行定义
// pages/goods_list/goods_list.js
Page({
data: {
tabs: [
{
id: 0,
value: "综合",
isActive:true
},
{
id: 1,
value: "销量",
isActive: false
}, {
id: 2,
value: "价格",
isActive: false
}
]
},
onLoad: function (options) {
console.log(options);//options可以直接获取页面参数
},
})
2.在组件components中新建组件Tabs,然后在goods_list中引入Tabs组件,在goods_list.wxml文件中代码如下
<Tabs tabs="{{tabs}}"></Tabs>
<!-- 属性名 属性值 -->
并且需要在列表页面的json 中,写如下代码
"usingComponents": {
"Tabs":"../../components/Tabs/Tabs"
},
3.返回组件Tabs中,开始写代码
在Tabs.js中的properties中接受一下数据:
properties: {
tabs: {
type: Array,
value:[]
}
},
然后在Tab.wxml和wxss中分别书写结构和样式:
// Tabs.wxml 文件
<view class="tabs">
<view class="tabs_title">
<view
wx:for="{{tabs}}"
wx:key="id"
class="title_item {{item.isActive?'active':''}}" >{{item.value}}</view>
</view>
<view class="tabs_content"></view>
</view>
//Tabs.wxss文件
.tabs_title{
display: flex;
}
.title_item{
display: flex;
justify-content: center;
align-items: center;
flex:1;
padding:15rpx 0;
}
.active{
color:var(--themeColor);
/* var和括号之间不可以有空格 */
border-bottom: 5rpx solid currentColor;
}
4.实现点击那个切换样式,(子组件向父组件传递数据)
(1)给title_item绑定点击事件 handleItemTap ,传递当前的索引号 data-index="{{index}}"
(2)在Tabs.js中的methods中定义点击事件handleItemTap
methods: {
hangdleItemTap(e) {
console.log(e);
// 1.获取点击的索引
const { index } = e.currentTarget.dataset;
// 2.触发 父组件中的事件 自定义
// this.triggerEvent("事件名",参数)
this.triggerEvent("tabsItemChange",{index})
}
}
(3)回到父组件 goods_list.wxml中监听子组件
<Tabs tabs="{{tabs}}" bindtabsItemChange = "handleTabsItemChange"></Tabs>
<!-- 属性名 属性值 --> <!-- 监听组件 bind子组件trigger中的方法名 -->
(4)在goods_list.js中处理handleTabsItemChange事件
handleTabsItemChange(e) {
// 1.获取被点击的标题索引
const { index } = e.detail;
// 2.修改原数组
let { tabs } = this.data;
tabs.forEach((v, i) => i === index ? v.isActive = true : v.isActive = false);
// 3.赋值到data中
this.setData({
tabs
})
}
5.点击不同的标题,下面显示不同的内容 --------》插槽slot
回到组件中,在tabs_content的view中 写入插槽标签
<view class="tabs_content">
<slot></slot>
</view>
然后在父组件goods_list.wxml中Tabs中插入元素
<Tabs tabs="{{tabs}}" bindtabsItemChange = "handleTabsItemChange">
<!-- 属性名 属性值 --> <!-- 监听组件 bind子组件trigger中的方法名 -->
<block wx:if="{{tabs[0].isActive}}">0</block>
<block wx:if="{{tabs[1].isActive}}">1</block>
<block wx:if="{{tabs[2].isActive}}">2</block>
</Tabs>
至此tab栏切换效果大致完成如下:
然后获取接口数据进行页面布局,由于要提交好几个参数进行请求,因此直接定义一个QueryParams,把每一项参数用key,value形式进行书写,由于onload事件加载的那个参数 options 就含有页面参数,因此对QueryParams中的cid进行一个赋值,并把返回成功数据进行页面渲染。
呈现结果如下: