创建页面tabsCur(这是自定义组件页面 子页面)
1 // components/tabsCur/tabsCur.js 2 Component({ 3 /** 4 * 组件的属性列表 5 */ 6 properties: { 7 menuss: { 8 type: Array, 9 value: [] 10 11 } 12 }, 13 14 /** 15 * 组件的初始数据 16 */ 17 data: { 18 19 }, 20 21 /** 22 * 组件的方法列表 23 */ 24 methods: { 25 clicktabs(e) { 26 //获取下标 27 const index = e.currentTarget.dataset.currindex; 28 //自定义 父组件 方法 29 this.triggerEvent("tabsItemChange",index); 30 } 31 32 } 33 })
0 /wxss/
1 <!-- 这是自定义 tabs 界面 --> 2 <view class="tabs"> 3 4 <view class="tabs_title"> 5 <view wx:for="{{menuss}}" wx:key="id" 6 class="title_item {{item.ischeck?'active':''}}" 7 bindtap="clicktabs" 8 data-currindex="{{index}}" 9 > 10 {{item.name}} 11 </view> 12 13 </view> 14 15 <view class="tabs_content"></view> 16 </view>
1 .tabs .tabs_title { 2 display: flex; 3 } 4 .tabs .tabs_title .title_item { 5 display: flex; 6 justify-content: center; 7 align-items: center; 8 flex: 1; 9 padding: 10rpx 0; 10 } 11 .tabs .active { 12 border-bottom: 5rpx solid currentColor; 13 color: var(--themecolor); 14 }
--------父组件--------
1 <view class="goosdetail"> 2 <!-- 搜索框 --> 3 <seach></seach> 4 <!-- 搜索框结束 --> 5 <!-- 监听自定义 父组件事件bindtabsItemChange-->
6 <tabsCur menuss="{{menuss}}" bindtabsItemChange="tabsItemChange"></tabsCur>
7 <block wx:if="{{menuss[0].ischeck}}">
8 <view class="first_tab">
9 <navigator class="goods_item" open-type="navigate">
10 <!-- 左侧图片 -->
11 <view class="goods_img_walf">
12 <image mode="widthFix" src="https://api.zbztb.cn/full/2fb113b32f7a2b161f5ee4096c319afedc3fd5a1.jpg" />
13 </view>
14 <!-- 右侧图片 -->
15 <view class="goods_info_walf">
16 <view class="goods_info_name">是的时代发生地方大是大非沙发都法师</view>
17 <view class="goods_info_price">3443$</view>
18 </view>
19 </navigator>
20 </view>
21 </block>
22 <block wx:elif="{{menuss[1].ischeck}}">122312</block>
23 <block wx:elif="{{menuss[2].ischeck}}">3121231</block>
24 </view>
1 .first_tab .goods_item { 2 display: flex; 3 } 4 .first_tab .goods_item .goods_img_walf { 5 flex: 2; 6 display: flex; 7 align-items: center; 8 justify-content: center; 9 } 10 .first_tab .goods_item .goods_img_walf image { 11 width: 70%; 12 } 13 .first_tab .goods_item .goods_info_walf { 14 flex: 3; 15 display: flex; 16 flex-direction: column; 17 justify-content: space-around; 18 } 19 .first_tab .goods_item .goods_info_walf .goods_info_name { 20 display: -webkit-box; 21 overflow: hidden; 22 -webkit-box-orient: vertical; 23 -webkit-line-clamp: 2; 24 } 25 .first_tab .goods_item .goods_info_walf .goods_info_price { 26 color: var(--themecolor); 27 font-size: 32rpx; 28 }
Page({ /** * 页面的初始数据 */ data: { menuss: [ { id: 0, name: "综合", ischeck: true }, { id: 1, name: "销量", ischeck: false }, { id: 2, name: "价格", ischeck: false } ] }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, //标题点击事件,自定义 tabsItemChange(e) { //获取索引 const index = e.detail; let menuss = this.data.menuss; menuss.forEach((v, i) => i === index ? v.ischeck = true : v.ischeck = false); this.setData({ menuss }) } , /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { console.log("页面下拉触发事件"); }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { console.log("用户点击右上角分享"); } , /* 手机屏幕转换 横屏变成竖屏 */ onResize: function () { console.log("d"); } })
.json 注册
1 { 2 "usingComponents": { 3 "tabsCur": "../components/tabsCur/tabsCur" 4 } 5 }
自己创建一下就能用了,同时也方便自己