小程序經(jīng)常會(huì)出現(xiàn)選項(xiàng)卡和全屏選項(xiàng)卡，這里寫一下我的布局，以便日后使用。

1.創(chuàng)建選項(xiàng)卡組件

我們先創(chuàng)建一個(gè)components文件夾和navlist的組件

QQ截圖20190718114942.png

navlist的html:

<view class='nav-box'>
   <view bindtap='clicnav' data-index="{{index}}" wx:for="{{navdata}}" wx:key="{{index}}" class='nav-list {{navindex === index?"clicknav":""}}'>
       {{item.text}}
   </view>
 </view>

navlist的js:

// components/navbar/index.js
const App = getApp();

Component({
 /**
  * 組件的屬性列表
  */
 properties: {
//接收頁(yè)面?zhèn)鬟^(guò)來(lái)的選項(xiàng)卡標(biāo)簽內(nèi)容
   navdata: {
     type: Array,
     value: []
   },
//介紹swiper當(dāng)前頁(yè)面數(shù)值用于滑動(dòng)swiper時(shí)改動(dòng)選項(xiàng)卡的顯示
   current: {
     type: Number,
//當(dāng)父頁(yè)面current值改動(dòng)時(shí)觸發(fā)num方法
     observer: 'num',
   }
 },

 /**
  * 組件的初始數(shù)據(jù)
  */
 data: {
//默認(rèn)選擇第一個(gè)
     navindex:0,
 },
 attached(){
   console.log(this.data.navdata);
 },
 /**
  * 組件的方法列表
  */
 methods: {
//選項(xiàng)卡的點(diǎn)擊事件
   clicnav(e){
//index 為選項(xiàng)卡的data-index參數(shù)
     let index = e.currentTarget.dataset.index;
//賦值給navindex以改變點(diǎn)擊表簽的顏色
       this.setData({
         navindex: index
       });
 
     var that = this;
 //將值傳給父頁(yè)面，讓父頁(yè)面改變swiper的當(dāng)前輪播
     var myEventDetail = { index: index } // detail對(duì)象，提供給事件監(jiān)聽(tīng)函數(shù)
     this.triggerEvent('myevent', myEventDetail) //myevent自定義名稱事件，父組件中使用
   },

   num(num) {
   //當(dāng)父頁(yè)面current值改動(dòng)時(shí)修改navindex的值
     this.setData({
       navindex: num
     });
   }
 }
})

navlist的json:

{
  "component": true,
  "usingComponents": {}
}

navlist的css:

/* components/navlist/navlist.wxss */
.nav-box{
  width: 100%;
  height: 100rpx;
  display: flex;
}
.nav-list{
  flex: 1;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32rpx;
  color: #000000;

  box-sizing: border-box;
  border-bottom: 2rpx solid #c4c4c4;
}
.clicknav{
  border-bottom: 2rpx solid #e74a45;
  color: #e74a45;
}

2.index頁(yè)面調(diào)用組件

index頁(yè)面調(diào)用選項(xiàng)卡組件并配合swiper滑動(dòng)

index的html:

<view id="navheight">
   <navlist bind:myevent="toggleToast" navdata="{{navdata}}" current="{{current}}"></navlist>
 </view>
   <swiper style='height:{{swiperHeight}}' current="{{navindex}}" bindchange="navchange">
     <swiper-item>
       <scroll-view style='width:100%;height:100%;background-color:green;' scroll-y>
         我是第一頁(yè)
       </scroll-view>
     </swiper-item>
     <swiper-item>
       <scroll-view style='width:100%;height:100%;background-color:yellow;' scroll-y>
         我是第二頁(yè)
       </scroll-view>
     </swiper-item>
     <swiper-item>
       <scroll-view style='width:100%;height:100%;background-color:blue;' scroll-y>
         我是第三頁(yè)
       </scroll-view>
     </swiper-item>
   </swiper>

index的js:

//index.js
//獲取應(yīng)用實(shí)例
const app = getApp()

Page({
  data: {
//傳給選項(xiàng)卡的標(biāo)簽內(nèi)容
    navdata: [{
      text: "個(gè)人信息"
    }, {
      text: "個(gè)人評(píng)價(jià)"
    }, {
      text: "項(xiàng)目歷史"
    }],
    navindex: 0,
    current: 0,
    swiperHeight: 0,
  },
  
  onLoad: function () {
    let _this = this;
    // 計(jì)算siiper到手機(jī)底部的高度賦值給swiper的height
    wx.createSelectorQuery().select('#navheight').boundingClientRect(function (rect) {
      wx.getSystemInfo({
        success(res) {
          _this.setData({
            swiperHeight: (res.windowHeight - rect.bottom) + "px"
          });
        }
      })
    }).exec()
  },
  // 獲取子組件信息
  toggleToast(e) {
    let index = e.detail.index;
    this.setData({
      navindex: index
    });
  },

  // 滑動(dòng)輪播事件
  navchange(e) {
    this.setData({
      current: e.detail.current
    });
  }
})

index的json:

{
  "usingComponents": {
    "navlist": "./components/navlist/navlist"
  }
}

index的css:無(wú)

至此我們的全屏選項(xiàng)卡就做好了

選項(xiàng)ka.gif