微信小程序实现tab切换和数据列表

问题背景

上篇文章介绍了微信小程序实现tab切换的一种方案(参考 https://blog.51cto.com/baorant24/6188157 )，感觉代码不是很精简，本文再用一个demo介绍微信小程序如何实现tab切换和数据列表。

问题分析

微信小程序对应页面文件结构如下： image.png

问题解决

话不多说，直接上代码： (1)index.js文件，代码如下：

  1. // pages/healdata/healthydata.ts
  2. Page({
  3.  
  4.   /**
  5.    * 页面的初始数据
  6.    */
  7.   data: {
  8.     currentIndex: 0, //默认是活动项
  9.     home: "#979797",
  10.     find: "#979797",
  11.     services: "#00c2a5",
  12.     mind: "#979797",
  13.     homeChoose: false,
  14.     findChoose: false,
  15.     servicesChoose: true,
  16.     mindChoose: false,
  17.     msg: {},//消息数
  18.     noNewMsg: true,//true表示新有新消息
  19.     servicesAppiontData: [//服务预约数据列表
  20.       {
  21.       }],
  22.     listItem: [
  23.         {
  24.             "deptId": 2098494533, 
  25.             "packageId": 1, 
  26.             "packageName": "院内服务", 
  27.             "services": [
  28.                 {
  29.                     "serviceId": 1, 
  30.                     "deptId": 2098494533, 
  31.                     "brandName": "PICC护理", 
  32.                     "serviceType": "1"
  33.                 }, 
  34.                 {
  35.                     "serviceId": 2, 
  36.                     "deptId": 2098494533, 
  37.                     "brandName": "压疮护理", 
  38.                     "serviceType": "1"
  39.                 }, 
  40.                 {
  41.                     "serviceId": 3, 
  42.                     "deptId": 2098494533, 
  43.                     "brandName": "导尿管护理", 
  44.                     "serviceType": "1"
  45.                 }, 
  46.                 {
  47.                     "serviceId": 4, 
  48.                     "deptId": 2098494533, 
  49.                     "brandName": "胃管护理", 
  50.                     "serviceType": "1",
  51.                 }
  52.             ]
  53.         }, 
  54.         {
  55.             "deptId": 2098494533, 
  56.             "packageId": 2, 
  57.             "packageName": "中医服务", 
  58.             "services": [
  59.                 {
  60.                     "serviceId": 7, 
  61.                     "deptId": 2098494533, 
  62.                     "brandName": "失眠", 
  63.                     "serviceType": "2"
  64.                 }, 
  65.                 {
  66.                     "serviceId": 8, 
  67.                     "deptId": 2098494533, 
  68.                     "brandName": "便秘", 
  69.                     "serviceType": "2"
  70.                 }, 
  71.                 {
  72.                     "serviceId": 9, 
  73.                     "deptId": 2098494533, 
  74.                     "brandName": "颈椎病", 
  75.                     "serviceType": "2"
  76.                 } 
  77.             ]
  78.         }, 
  79.         {
  80.           "deptId": 2098494533, 
  81.           "packageId": 2, 
  82.           "packageName": "中医服务", 
  83.           "services": [
  84.               {
  85.                   "serviceId": 10, 
  86.                   "deptId": 2098494533, 
  87.                   "brandName": "便秘", 
  88.                   "serviceType": "2"
  89.               }, 
  90.               {
  91.                   "serviceId": 11, 
  92.                   "deptId": 2098494533, 
  93.                   "brandName": "颈椎病", 
  94.                   "serviceType": "2"
  95.               } 
  96.           ]
  97.       }, 
  98.     ],//数据列表数据
  99.     patintIdS: ''
  100.   },
  101.  
  102.   /**
  103.    * 生命周期函数--监听页面加载
  104.    */
  105.   onLoad() {
  106.     
  107.   },
  108.  
  109.   //点击tab时触发
  110.   titleClick: function (e) {
  111.     this.setData({
  112.       //拿到当前索引并动态改变
  113.       currentIndex: e.currentTarget.dataset.idx
  114.     })
  115.  
  116.     //  console.log("======拿到当前索引并动态改变=dddd======")    
  117.   },
  118.  
  119.   /**
  120.    * 生命周期函数--监听页面初次渲染完成
  121.    */
  122.   onReady() {
  123.  
  124.   },
  125.  
  126.   /**
  127.    * 生命周期函数--监听页面显示
  128.    */
  129.   onShow() {
  130.  
  131.     wx.hideHomeButton()
  132.   },
  133.  
  134.   /**
  135.    * 生命周期函数--监听页面隐藏
  136.    */
  137.   onHide() {
  138.  
  139.   },
  140.  
  141.   /**
  142.    * 生命周期函数--监听页面卸载
  143.    */
  144.   onUnload() {
  145.  
  146.   },
  147.  
  148.   /**
  149.    * 页面相关事件处理函数--监听用户下拉动作
  150.    */
  151.   onPullDownRefresh() {
  152.  
  153.   },
  154.  
  155.   /**
  156.    * 页面上拉触底事件的处理函数
  157.    */
  158.   onReachBottom() {
  159.  
  160.   },
  161.  
  162.   /**
  163.    * 用户点击右上角分享
  164.    */
  165.   onShareAppMessage() {
  166.  
  167.   }
  168. })

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

  1. {
  2.   "usingComponents": {},
  3.   "navigationBarTitleText": "分类列表",
  4.   "navigationStyle": "custom"
  5. }

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

  1. <!-- 头部搜索 -->
  2. <view class="title_search">
  3. </view>
  4. <!-- 头部搜索 -->
  5. <!-- Tab布局 -->
  6. <view catchtouchmove='true'>
  7.   <view class='navBox'>
  8.     <view class='titleBox1' id="allaid" bindtap='titleClick' data-idx='0'>
  9.       <text class="{{0 == currentIndex ? 'fontColorBox' : 'fontColorBox1'}}">服务预约</text>
  10.       <hr class="{{0 == currentIndex ? 'lineBox' : 'notLineBox'}}" />
  11.     </view>
  12.     <view class='titleBox2' bindtap='titleClick' data-idx='1'>
  13.       <text class="{{1 == currentIndex ? 'fontColorBox' : 'fontColorBox1'}}">订单消息</text>
  14.       <hr class="{{1 == currentIndex ? 'lineBox' : 'notLineBox'}} " />
  15.     </view>
  16.   </view>
  17.   <!-- 内容布局 -->
  18.   <swiper class='swiperTtemBox' bindchange='pagechange' current='{{currentIndex}}'>
  19.     <!--服务预约 -->
  20.     <swiper-item class='swiperTtemBox' catchtouchmove='onTouchMove'>
  21.       <!-- 服务预约列表 -->
  22.       <scroll-view class="box-scroll" scroll-y='true'>
  23.         <!-- 服务列表 -->
  24.         <block wx:for="{{listItem}}" wx:key="id" wx:for-item="itemName" wx:for-index="id">
  25.           <view class="up_service">
  26.             <view class="up_service_content">
  27.               <!-- 上门服务 -->
  28.               <view class="up_service_title_txt">
  29.                 <text>
  30.                   {{itemName.packageName }}
  31.                 </text>
  32.               </view>
  33.               <!-- 服务内容 -->
  34.               <view class="upitem_list">
  35.                 <block wx:for="{{itemName.services.length}}" wx:key="ids" wx:for-item="chilgrenItem" wx:for-index="ids">
  36.                   <view class="item_nursin" catchtap="nursin_servies" id="{{itemName.services[ids].serviceId}}">
  37.                     <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>
  38.                   </view>
  39.                 </block>
  40.               </view>
  41.             </view>
  42.           </view>
  43.         </block>
  44.       </scroll-view>
  45.     </swiper-item>
  46.     <!-- 订单消息 -->
  47.     <swiper-item class='swiperTtemBox' catchtouchmove='onTouchMove'>
  48.       <view class="order_msg_md">暂无订单消息</view>
  49.     </swiper-item>
  50.   </swiper>
  51. </view>

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

  1. Page {
  2.   background: #f0f0f0;
  3.   height: 100%;
  4.   position: fixed;
  5. }
  6. /* 头部搜索 */
  7. /* 搜索标题 */
  8. .title_search{
  9.   background: linear-gradient(to right, #0455a7, #62c8ec);
  10.   height: 170rpx;
  11.   width: 100%;
  12.   display: flex;
  13.   flex-direction: row;
  14.   align-items: flex-end;
  15.   justify-content: flex-start;
  16. }
  17. .seeck_md{
  18.   display: flex;
  19.   flex-direction: row;
  20.   width: 100%;
  21.   justify-content: space-between;
  22.   align-items: flex-end;
  23. }
  24. .ahead_md{
  25.   display: flex;
  26.   flex-direction: row;
  27.   width: 100%;
  28.   margin-bottom: 20rpx;
  29. }
  30.  
  31. .title_icon_ss{
  32.   height: 70rpx;
  33.   width: 70rpx;
  34.   background-color: white;
  35.   border-radius: 35rpx;
  36.   margin-left: 20rpxrpx;
  37. }
  38. /* 搜索部分bg*/
  39. .search_md{
  40.   background-color: #69ccf1;
  41.   margin-left: 10rpx;
  42.   height: 70rpx;
  43.   width: 390rpx;
  44.   border-radius: 35rpx;
  45.   display: flex;
  46.   flex-direction: row;
  47.   align-items: center;
  48.   justify-content: space-between;
  49. }
  50.  
  51. /* 搜索 */
  52. .seeck_ic{
  53.   height: 46rpx;
  54.   width: 46rpx;
  55.   margin-left: 20rpx;
  56.   border-radius: 23rpx;
  57. }
  58. /* 语音 */
  59. .vioce_icon{
  60.   height: 46rpx;
  61.   width: 46rpx;
  62.   border-radius: 23rpx;
  63.   margin-right: 20rpx;
  64. }
  65. /* 消息 */
  66. .msg{
  67.   width: 100rpx;
  68.   height: 90rpx; 
  69.   display: flex;
  70.   flex-direction: column;
  71.   justify-content: center;
  72.   align-items: center;
  73.   margin-right: 0rpx;
  74.   margin-left: 30rpx;
  75. }
  76.  
  77. /* 消息提示 */
  78. .msg_tag{
  79.   position: absolute;
  80.   background-color: #ff6162;
  81.   width: 14rpx;
  82.   height: 14rpx;
  83.   border-radius: 7rpx;
  84.   margin-bottom: 72rpx;
  85.   margin-left: 24rpx;
  86. }
  87.  
  88. .msg_ic{
  89.   height: 44rpx;
  90.   width: 48rpx;
  91.   margin-right: 2rpx;
  92.   margin-right: 10rpx;
  93. }
  94. .msg_txt{
  95.   font-size: 24rpx;
  96.   height: 40rpx;
  97.   width: 60rpx;
  98.   margin-bottom: 20rpx;
  99.   align-items: flex-start;
  100.   color: #fff;
  101.   display: flex;
  102.   justify-content: flex-start;
  103. }
  104. /* 退出 */
  105. .logout{
  106.   width: 100rpx;
  107.   height: 90rpx; 
  108.   display: flex;
  109.   flex-direction: column;
  110.   justify-content: center;
  111.   align-items: center;
  112.   margin-right: 30rpx; 
  113. }
  114. .logout_ic{
  115.   height: 44rpx;
  116.   width: 48rpx;
  117.   margin-right: 2rpx;
  118. }
  119. .logout_txt{
  120.   font-size: 24rpx;
  121.   height: 40rpx;
  122.   width: 60rpx;
  123.   margin-bottom: 20rpx;
  124.   align-items: flex-start;
  125.   color: #fff;
  126.   display: flex;
  127.   justify-content: flex-start;
  128. }
  129. /* 搜索标题 */
  130. /* 头部搜索  */
  131. .box-scroll{
  132.   background-color: #EFEFEF;
  133.   width: 100%;
  134.   flex: 1 auto;
  135.   height: calc(100vh - 260rpx);
  136.   left: 0rpx;
  137.   right: 0rpx;
  138.   top: 0rpx;
  139.   padding-bottom: 0rpx;
  140. }
  141.  
  142. /* .box-scroll {
  143.   flex: 1 auto;
  144.   height: calc(100vh - 390rpx);
  145.   left: 0rpx;
  146.   right: 0rpx;
  147.   top: 0rpx;
  148.   padding-bottom: 20rpx;
  149. } */
  150.  
  151. /* 顶部切换 */
  152. .navBox {
  153.   /* 顶部tab盒子样式 */
  154.   width: 100%;
  155.   height: 80rpx;
  156.   background: white;
  157.   display: flex;
  158.   flex-direction: row;
  159.   align-items: center;
  160.   justify-content: center;
  161. }
  162.  
  163. /* 文字默认颜色 */
  164. .fontColorBox {
  165.   color: #07c8ae;
  166. }
  167.  
  168. .fontColorBox1 {
  169.   color: black;
  170. }
  171.  
  172. /* 文字默认颜色 */
  173. .titleBox1,
  174. .titleBox2 {
  175.   /* 未选中文字的样式 */
  176.   width: 50%;
  177.   font-size: 30rpx;
  178.   height: 100%;
  179.   display: flex;
  180.   flex-direction: column;
  181.   align-items: center;
  182.   justify-content: flex-end;
  183.   padding-top: 10rpx;
  184. }
  185.  
  186. .lineBox,
  187. .notLineBox {
  188.   /* 选中及未选中底线共同样式 */
  189.   width: 100%;
  190.   height: 4rpx;
  191.   margin-top: 16rpx;
  192.   border-radius: 4rpx;
  193. }
  194.  
  195. .lineBox {
  196.   /* 选中底线样式 */
  197.   background: #06c7ae;
  198.   width: 100%;
  199.   height: 4rpx;
  200.   margin-top: 16rpx;
  201.   border-radius: 4rpx;
  202. }
  203.  
  204. .notLineBox {
  205.   /* 未选中底线样式 */
  206.   background: transparent;
  207.   width: 100%;
  208.   height: 4rpx;
  209. }
  210.  
  211. /* 底部内容样式 */
  212. .swiperTtemBox {
  213.   height: 100vh;
  214.   overflow: scroll;
  215.   margin: 0rpx 0rpx;
  216.   background: #f0f0f0;
  217.   border-radius: 30rpx;
  218.   font-size: 28rpx;
  219.   margin-top: 5rpx;
  220. }
  221.  
  222. /* 顶部切换 */
  223. .up_service {
  224.   justify-content: left;
  225.   padding-left: 40rpx;
  226.   padding-right: 40rpx;
  227. }
  228.  
  229. .up_service_content {
  230.   justify-content: space-between;
  231. }
  232.  
  233. .up_service_title_txt {
  234.   color: #666666;
  235. }
  236.  
  237. .upitem_list {
  238.   display: flex;
  239.   flex-direction: row;
  240.   justify-content: space-between;
  241.   flex-wrap: wrap;
  242. }
  243.  
  244. .item_nursin {
  245.   width: 320rpx;
  246.   height: 200rpx;
  247.   display: flex;
  248.   flex-direction: column;
  249.   justify-content: center;
  250.   align-items: center;
  251.   flex-shrink: 0;
  252.   flex-grow: 0;
  253.   margin-top: 30rpx;
  254.   background-color: white;
  255.   border-radius: 20rpx;
  256. }
  257.  
  258. .up_service_icon {
  259.   width: 130rpx;
  260.   height: 110rpx;
  261.   border-radius: 10rpx;
  262.   margin-top: 10rpx;
  263. }
  264.  
  265. #up_ser_it_txt_id {
  266.   color: #1b1b1b;
  267.   font-size: 32rpx;
  268.   margin-top: 10rpx;
  269. }
  270.  
  271. .cn_medicine {
  272.   margin-top: 30rpx;
  273.   display: flex;
  274.   flex-direction: row;
  275.   justify-content: space-between;
  276. }
  277.  
  278. /* 院内服务 */
  279. .hospital_service {
  280.   justify-content: left;
  281.   padding-left: 40rpx;
  282.   padding-right: 40rpx;
  283.   margin-top: 10rpx;
  284. }
  285.  
  286. .order_msg_md{
  287.   display: flex;
  288.   margin-top: 30rpx;
  289.   align-items: center;
  290.   justify-content: center;
  291.   color: #919199;
  292. }
  293.  
  294.  
  295. .scroll-view_H {
  296.   overflow: scroll;
  297.   white-space: nowrap;
  298.   background-color: white;
  299.   margin-right: 30rpx;
  300. }
  301.  
  302. .head_list {
  303.   display: flex;
  304.   /* display: inline-block; */
  305.   flex-direction: row;
  306.   background-color: white;
  307.   height: 160rpx;
  308.   width: 100%;
  309.   justify-content: flex-start;
  310.   align-items: center;
  311. }
  312.  
  313. /* 家属选择背景 */
  314. .head_list_item_one {
  315.   flex-shrink: 0;
  316.   flex-grow: 0;
  317.   display: flex;
  318.   flex-direction: column;
  319.   background-color: #f0f0f0;
  320.   width: 140rpx;
  321.   height: 140rpx;
  322.   align-items: center;
  323.   justify-content: center;
  324.   margin-left: 30rpx;
  325.   border-radius: 10rpx;
  326. }
  327.  
  328. /* 家属选背景 */
  329. .head_list_item_one_ed {
  330.   display: flex;
  331.   flex-direction: column;
  332.   background-color: #06c7ae;
  333.   flex-shrink: 0;
  334.   flex-grow: 0;
  335.   width: 140rpx;
  336.   height: 140rpx;
  337.   align-items: center;
  338.   justify-content: center;
  339.   margin-left: 30rpx;
  340.   border-radius: 10rpx;
  341. }
  342.  
  343. .head_list_item_one_im_parent {
  344.   background-color: white;
  345.   width: 80rpx;
  346.   height: 80rpx;
  347.   border-radius: 40rpx;
  348.   display: flex;
  349.   align-items: center;
  350.   justify-content: center;
  351. }
  352.  
  353. .head_list_item_one_im {
  354.   width: 72rpx;
  355.   height: 72rpx;
  356.   border-radius: 36rpx;
  357.   background-color: white;
  358. }
  359.  
  360. .head_list_item_one_txt {
  361.   margin-top: 6rpx;
  362.   font-size: 26rpx;
  363.   color: #252525;
  364. }
  365.  
  366. .head_list_item_one_txt_ed {
  367.   margin-top: 6rpx;
  368.   font-size: 26rpx;
  369.   color: #ffffff;
  370. }
  371.  
  372. .first {
  373.   margin-top: 20rpx;
  374. }

运行结果如下： 1681378325094.gif

问题总结

本文介绍了微信小程序如何实现tab切换和数据列表，有兴趣的同学可以进一步深入研究。