微信小程序?qū)崿F(xiàn)tab切換和數(shù)據(jù)列表

問題背景

上篇文章介紹了微信小程序?qū)崿F(xiàn)tab切換的一種方案(參考 https://blog.51cto.com/baorant24/6188157 )，感覺代碼不是很精簡(jiǎn)，本文再用一個(gè)demo介紹微信小程序如何實(shí)現(xiàn)tab切換和數(shù)據(jù)列表。

問題分析

微信小程序?qū)?yīng)頁面文件結(jié)構(gòu)如下：

問題解決

話不多說，直接上代碼： (1)index.js文件，代碼如下：

// pages/healdata/healthydata.ts
Page({
 
  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
    currentIndex: 0, //默認(rèn)是活動(dòng)項(xiàng)
    home: "#979797",
    find: "#979797",
    services: "#00c2a5",
    mind: "#979797",
    homeChoose: false,
    findChoose: false,
    servicesChoose: true,
    mindChoose: false,
    msg: {},//消息數(shù)
    noNewMsg: true,//true表示新有新消息
    servicesAppiontData: [//服務(wù)預(yù)約數(shù)據(jù)列表
      {
      }],
    listItem: [
        {
            "deptId": 2098494533, 
            "packageId": 1, 
            "packageName": "院內(nèi)服務(wù)", 
            "services": [
                {
                    "serviceId": 1, 
                    "deptId": 2098494533, 
                    "brandName": "PICC護(hù)理", 
                    "serviceType": "1"
                }, 
                {
                    "serviceId": 2, 
                    "deptId": 2098494533, 
                    "brandName": "壓瘡護(hù)理", 
                    "serviceType": "1"
                }, 
                {
                    "serviceId": 3, 
                    "deptId": 2098494533, 
                    "brandName": "導(dǎo)尿管護(hù)理", 
                    "serviceType": "1"
                }, 
                {
                    "serviceId": 4, 
                    "deptId": 2098494533, 
                    "brandName": "胃管護(hù)理", 
                    "serviceType": "1",
                }
            ]
        }, 
        {
            "deptId": 2098494533, 
            "packageId": 2, 
            "packageName": "中醫(yī)服務(wù)", 
            "services": [
                {
                    "serviceId": 7, 
                    "deptId": 2098494533, 
                    "brandName": "失眠", 
                    "serviceType": "2"
                }, 
                {
                    "serviceId": 8, 
                    "deptId": 2098494533, 
                    "brandName": "便秘", 
                    "serviceType": "2"
                }, 
                {
                    "serviceId": 9, 
                    "deptId": 2098494533, 
                    "brandName": "頸椎病", 
                    "serviceType": "2"
                } 
            ]
        }, 
        {
          "deptId": 2098494533, 
          "packageId": 2, 
          "packageName": "中醫(yī)服務(wù)", 
          "services": [
              {
                  "serviceId": 10, 
                  "deptId": 2098494533, 
                  "brandName": "便秘", 
                  "serviceType": "2"
              }, 
              {
                  "serviceId": 11, 
                  "deptId": 2098494533, 
                  "brandName": "頸椎病", 
                  "serviceType": "2"
              } 
          ]
      }, 
    ],//數(shù)據(jù)列表數(shù)據(jù)
    patintIdS: ''
  },
 
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  onLoad() {
    
  },
 
  //點(diǎn)擊tab時(shí)觸發(fā)
  titleClick: function (e) {
    this.setData({
      //拿到當(dāng)前索引并動(dòng)態(tài)改變
      currentIndex: e.currentTarget.dataset.idx
    })
 
    //  console.log("======拿到當(dāng)前索引并動(dòng)態(tài)改變=dddd======")    
  },
 
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
   */
  onReady() {
 
  },
 
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面顯示
   */
  onShow() {
 
    wx.hideHomeButton()
  },
 
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面隱藏
   */
  onHide() {
 
  },
 
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面卸載
   */
  onUnload() {
 
  },
 
  /**
   * 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作
   */
  onPullDownRefresh() {
 
  },
 
  /**
   * 頁面上拉觸底事件的處理函數(shù)
   */
  onReachBottom() {
 
  },
 
  /**
   * 用戶點(diǎn)擊右上角分享
   */
  onShareAppMessage() {
 
  }
})

(2)index.json文件，代碼如下：

{
  "usingComponents": {},
  "navigationBarTitleText": "分類列表",
  "navigationStyle": "custom"
}

(3)index.wxml文件，代碼如下：

<!-- 頭部搜索 -->
<view class="title_search">
</view>
<!-- 頭部搜索 -->
<!-- Tab布局 -->
<view catchtouchmove='true'>
  <view class='navBox'>
    <view class='titleBox1' id="allaid" bindtap='titleClick' data-idx='0'>
      <text class="{{0 == currentIndex ? 'fontColorBox' : 'fontColorBox1'}}">服務(wù)預(yù)約</text>
      <hr class="{{0 == currentIndex ? 'lineBox' : 'notLineBox'}}" />
    </view>
    <view class='titleBox2' bindtap='titleClick' data-idx='1'>
      <text class="{{1 == currentIndex ? 'fontColorBox' : 'fontColorBox1'}}">訂單消息</text>
      <hr class="{{1 == currentIndex ? 'lineBox' : 'notLineBox'}} " />
    </view>
  </view>
  <!-- 內(nèi)容布局 -->
  <swiper class='swiperTtemBox' bindchange='pagechange' current='{{currentIndex}}'>
    <!--服務(wù)預(yù)約 -->
    <swiper-item class='swiperTtemBox' catchtouchmove='onTouchMove'>
      <!-- 服務(wù)預(yù)約列表 -->
      <scroll-view class="box-scroll" scroll-y='true'>
        <!-- 服務(wù)列表 -->
        <block wx:for="{{listItem}}" wx:key="id" wx:for-item="itemName" wx:for-index="id">
          <view class="up_service">
            <view class="up_service_content">
              <!-- 上門服務(wù) -->
              <view class="up_service_title_txt">
                <text>
                  {{itemName.packageName }}
                </text>
              </view>
              <!-- 服務(wù)內(nèi)容 -->
              <view class="upitem_list">
                <block wx:for="{{itemName.services.length}}" wx:key="ids" wx:for-item="chilgrenItem" wx:for-index="ids">
                  <view class="item_nursin" catchtap="nursin_servies" id="{{itemName.services[ids].serviceId}}">
                    <text class="up_ser_it_txt" id="up_ser_it_txt_id" catchtap="nursin_servies" id="{{itemName.services[ids].serviceId}}">{{itemName.services[ids].brandName}}</text>
                  </view>
                </block>
              </view>
            </view>
          </view>
        </block>
      </scroll-view>
    </swiper-item>
    <!-- 訂單消息 -->
    <swiper-item class='swiperTtemBox' catchtouchmove='onTouchMove'>
      <view class="order_msg_md">暫無訂單消息</view>
    </swiper-item>
  </swiper>
</view>

(4)index.wxss文件，代碼如下：

Page {
  background: #f0f0f0;
  height: 100%;
  position: fixed;
}
/* 頭部搜索 */
/* 搜索標(biāo)題 */
.title_search{
  background: linear-gradient(to right, #0455a7, #62c8ec);
  height: 170rpx;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-start;
}
.seeck_md{
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-between;
  align-items: flex-end;
}
.ahead_md{
  display: flex;
  flex-direction: row;
  width: 100%;
  margin-bottom: 20rpx;
}
 
.title_icon_ss{
  height: 70rpx;
  width: 70rpx;
  background-color: white;
  border-radius: 35rpx;
  margin-left: 20rpxrpx;
}
/* 搜索部分bg*/
.search_md{
  background-color: #69ccf1;
  margin-left: 10rpx;
  height: 70rpx;
  width: 390rpx;
  border-radius: 35rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
 
/* 搜索 */
.seeck_ic{
  height: 46rpx;
  width: 46rpx;
  margin-left: 20rpx;
  border-radius: 23rpx;
}
/* 語音 */
.vioce_icon{
  height: 46rpx;
  width: 46rpx;
  border-radius: 23rpx;
  margin-right: 20rpx;
}
/* 消息 */
.msg{
  width: 100rpx;
  height: 90rpx; 
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-right: 0rpx;
  margin-left: 30rpx;
}
 
/* 消息提示 */
.msg_tag{
  position: absolute;
  background-color: #ff6162;
  width: 14rpx;
  height: 14rpx;
  border-radius: 7rpx;
  margin-bottom: 72rpx;
  margin-left: 24rpx;
}
 
.msg_ic{
  height: 44rpx;
  width: 48rpx;
  margin-right: 2rpx;
  margin-right: 10rpx;
}
.msg_txt{
  font-size: 24rpx;
  height: 40rpx;
  width: 60rpx;
  margin-bottom: 20rpx;
  align-items: flex-start;
  color: #fff;
  display: flex;
  justify-content: flex-start;
}
/* 退出 */
.logout{
  width: 100rpx;
  height: 90rpx; 
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-right: 30rpx; 
}
.logout_ic{
  height: 44rpx;
  width: 48rpx;
  margin-right: 2rpx;
}
.logout_txt{
  font-size: 24rpx;
  height: 40rpx;
  width: 60rpx;
  margin-bottom: 20rpx;
  align-items: flex-start;
  color: #fff;
  display: flex;
  justify-content: flex-start;
}
/* 搜索標(biāo)題 */
/* 頭部搜索  */
.box-scroll{
  background-color: #EFEFEF;
  width: 100%;
  flex: 1 auto;
  height: calc(100vh - 260rpx);
  left: 0rpx;
  right: 0rpx;
  top: 0rpx;
  padding-bottom: 0rpx;
}
 
/* .box-scroll {
  flex: 1 auto;
  height: calc(100vh - 390rpx);
  left: 0rpx;
  right: 0rpx;
  top: 0rpx;
  padding-bottom: 20rpx;
} */
 
/* 頂部切換 */
.navBox {
  /* 頂部tab盒子樣式 */
  width: 100%;
  height: 80rpx;
  background: white;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
 
/* 文字默認(rèn)顏色 */
.fontColorBox {
  color: #07c8ae;
}
 
.fontColorBox1 {
  color: black;
}
 
/* 文字默認(rèn)顏色 */
.titleBox1,
.titleBox2 {
  /* 未選中文字的樣式 */
  width: 50%;
  font-size: 30rpx;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-top: 10rpx;
}
 
.lineBox,
.notLineBox {
  /* 選中及未選中底線共同樣式 */
  width: 100%;
  height: 4rpx;
  margin-top: 16rpx;
  border-radius: 4rpx;
}
 
.lineBox {
  /* 選中底線樣式 */
  background: #06c7ae;
  width: 100%;
  height: 4rpx;
  margin-top: 16rpx;
  border-radius: 4rpx;
}
 
.notLineBox {
  /* 未選中底線樣式 */
  background: transparent;
  width: 100%;
  height: 4rpx;
}
 
/* 底部內(nèi)容樣式 */
.swiperTtemBox {
  height: 100vh;
  overflow: scroll;
  margin: 0rpx 0rpx;
  background: #f0f0f0;
  border-radius: 30rpx;
  font-size: 28rpx;
  margin-top: 5rpx;
}
 
/* 頂部切換 */
.up_service {
  justify-content: left;
  padding-left: 40rpx;
  padding-right: 40rpx;
}
 
.up_service_content {
  justify-content: space-between;
}
 
.up_service_title_txt {
  color: #666666;
}
 
.upitem_list {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
}
 
.item_nursin {
  width: 320rpx;
  height: 200rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  flex-grow: 0;
  margin-top: 30rpx;
  background-color: white;
  border-radius: 20rpx;
}
 
.up_service_icon {
  width: 130rpx;
  height: 110rpx;
  border-radius: 10rpx;
  margin-top: 10rpx;
}
 
#up_ser_it_txt_id {
  color: #1b1b1b;
  font-size: 32rpx;
  margin-top: 10rpx;
}
 
.cn_medicine {
  margin-top: 30rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
 
/* 院內(nèi)服務(wù) */
.hospital_service {
  justify-content: left;
  padding-left: 40rpx;
  padding-right: 40rpx;
  margin-top: 10rpx;
}
 
.order_msg_md{
  display: flex;
  margin-top: 30rpx;
  align-items: center;
  justify-content: center;
  color: #919199;
}
 
 
.scroll-view_H {
  overflow: scroll;
  white-space: nowrap;
  background-color: white;
  margin-right: 30rpx;
}
 
.head_list {
  display: flex;
  /* display: inline-block; */
  flex-direction: row;
  background-color: white;
  height: 160rpx;
  width: 100%;
  justify-content: flex-start;
  align-items: center;
}
 
/* 家屬選擇背景 */
.head_list_item_one {
  flex-shrink: 0;
  flex-grow: 0;
  display: flex;
  flex-direction: column;
  background-color: #f0f0f0;
  width: 140rpx;
  height: 140rpx;
  align-items: center;
  justify-content: center;
  margin-left: 30rpx;
  border-radius: 10rpx;
}
 
/* 家屬選背景 */
.head_list_item_one_ed {
  display: flex;
  flex-direction: column;
  background-color: #06c7ae;
  flex-shrink: 0;
  flex-grow: 0;
  width: 140rpx;
  height: 140rpx;
  align-items: center;
  justify-content: center;
  margin-left: 30rpx;
  border-radius: 10rpx;
}
 
.head_list_item_one_im_parent {
  background-color: white;
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
 
.head_list_item_one_im {
  width: 72rpx;
  height: 72rpx;
  border-radius: 36rpx;
  background-color: white;
}
 
.head_list_item_one_txt {
  margin-top: 6rpx;
  font-size: 26rpx;
  color: #252525;
}
 
.head_list_item_one_txt_ed {
  margin-top: 6rpx;
  font-size: 26rpx;
  color: #ffffff;
}
 
.first {
  margin-top: 20rpx;
}

運(yùn)行結(jié)果如下：

問題總結(jié)

本文介紹了微信小程序如何實(shí)現(xiàn)tab切換和數(shù)據(jù)列表，有興趣的同學(xué)可以進(jìn)一步深入研究。文章來源地址http://www.zghlxwxcb.cn/news/detail-754125.html