創建頁面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 }
自己創建一下就能用了,同時也方便自己