首页 > 编程语言 >微信小程序实现tab切换和数据列表

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

时间：2023-04-13 18:04:30浏览次数：31  
标签：flex 程序实现 微信 height content width tab margin color

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

问题背景

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

问题分析

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

问题解决

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

// pages/healdata/healthydata.ts
Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    currentIndex: 0, //默认是活动项
    home: "#979797",
    find: "#979797",
    services: "#00c2a5",
    mind: "#979797",
    homeChoose: false,
    findChoose: false,
    servicesChoose: true,
    mindChoose: false,
    msg: {},//消息数
    noNewMsg: true,//true表示新有新消息
    servicesAppiontData: [//服务预约数据列表
      {
      }],
    listItem: [
        {
            "deptId": 2098494533, 
            "packageId": 1, 
            "packageName": "院内服务", 
            "services": [
                {
                    "serviceId": 1, 
                    "deptId": 2098494533, 
                    "brandName": "PICC护理", 
                    "serviceType": "1"
                }, 
                {
                    "serviceId": 2, 
                    "deptId": 2098494533, 
                    "brandName": "压疮护理", 
                    "serviceType": "1"
                }, 
                {
                    "serviceId": 3, 
                    "deptId": 2098494533, 
                    "brandName": "导尿管护理", 
                    "serviceType": "1"
                }, 
                {
                    "serviceId": 4, 
                    "deptId": 2098494533, 
                    "brandName": "胃管护理", 
                    "serviceType": "1",
                }
            ]
        }, 
        {
            "deptId": 2098494533, 
            "packageId": 2, 
            "packageName": "中医服务", 
            "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": "中医服务", 
          "services": [
              {
                  "serviceId": 10, 
                  "deptId": 2098494533, 
                  "brandName": "便秘", 
                  "serviceType": "2"
              }, 
              {
                  "serviceId": 11, 
                  "deptId": 2098494533, 
                  "brandName": "颈椎病", 
                  "serviceType": "2"
              } 
          ]
      }, 
    ],//数据列表数据
    patintIdS: ''
  },
 
  /**
   * 生命周期函数--监听页面加载
   */
  onl oad() {
    
  },
 
  //点击tab时触发
  titleClick: function (e) {
    this.setData({
      //拿到当前索引并动态改变
      currentIndex: e.currentTarget.dataset.idx
    })
 
    //  console.log("======拿到当前索引并动态改变=dddd======")    
  },
 
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
 
  },
 
  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
 
    wx.hideHomeButton()
  },
 
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
 
  },
 
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
 
  },
 
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
 
  },
 
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
 
  },
 
  /**
   * 用户点击右上角分享
   */
  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'}}">服务预约</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>
  <!-- 内容布局 -->
  <swiper class='swiperTtemBox' bindchange='pagechange' current='{{currentIndex}}'>
    <!--服务预约 -->
    <swiper-item class='swiperTtemBox' catchtouchmove='onTouchMove'>
      <!-- 服务预约列表 -->
      <scroll-view class="box-scroll" scroll-y='true'>
        <!-- 服务列表 -->
        <block wx:for="{{listItem}}" wx:key="id" wx:for-item="itemName" wx:for-index="id">
          <view class="up_service">
            <view class="up_service_content">
              <!-- 上门服务 -->
              <view class="up_service_title_txt">
                <text>
                  {{itemName.packageName }}
                </text>
              </view>
              <!-- 服务内容 -->
              <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;
}
/* 头部搜索 */
/* 搜索标题 */
.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;
}
/* 搜索标题 */
/* 头部搜索  */
.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;
}
 
/* 文字默认颜色 */
.fontColorBox {
  color: #07c8ae;
}
 
.fontColorBox1 {
  color: black;
}
 
/* 文字默认颜色 */
.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;
}
 
/* 底部内容样式 */
.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;
}
 
/* 院内服务 */
.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;
}

运行结果如下： 1681378325094.gif

问题总结

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

标签：flex,程序实现,微信,height,content,width,tab,margin,color
From： https://blog.51cto.com/baorant24/6188286

相关文章

  • taro3.6.4 在H5 端使用 tabBar 出现bug --- taro Cannot read properties of undefi
    taro3.6.4在H5端使用tabBar出现bug解决办法就是换版本3.6.2好像没有这个问题已经有人反馈了,https://github.com/NervJS/taro/issues/13581taroCannotreadpropertiesofundefined(reading'list')......
  • Mac ｜ iOS ｜ Windows：安装Stable diffusion教程
    热烈欢迎，请直接点击！！！进入博主AppStore主页，下载使用各个作品！！！注：博主将坚持每月上线一个新app！！！Apple已支持的开源库：https://machinelearning.apple.com/research/stable-diffusion-coreml-apple-silicon一、MAC部署安装：https://github.com/apple/ml-stable-diffusiongitclone......
  • 微信小程序中target和currentTarget的区别
    微信小程序中target和currentTarget的区别<viewclass="outer-view"bindtap="outerHandler">​<buttontype="primary">按钮</button></view>点击内部按钮时，点击事件会通过冒泡的方式，向外扩散，触发view的tap事件，此时target指向触发事件源头，就是button，而c......
  • 微信小程序当input框中的值改变时获取input框的值
    微信小程序当input框中的值改变时获取input框的值wxml文件，input框值改变触发inputHandler函数<inputstyle="border:1pxsolid;"type="text"bindinput="inputHandler"/>js文件inputHandler(e){console.log(e.detail.value)}......
  • 微信小程序中rpx
    rpx是为了解决微信小程序屏幕宽度自适应问题产生的尺寸单位，是微信小程序独有的尺寸单位，rpx（responsivepixel）:可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在iPhone6上，屏幕宽度为375px，共有750个物理像素，则750rpx=375px=750物理像素，1rpx=0.5px=1物理像素。引......
  • 微信小程序嵌套的webview页面实现导航，可跳转高德百度等app
    需求：微信小程序中使用webview嵌套了h5页面，h5页面中有经纬度，需要实现唤醒高德app。实现思路：此处h5未配置wxSDK，无法直接使用openLocation，所以将经纬度传给小程序，map页面为跳转中间页，再实现打开地图页面。h5://高德地图导航constaMapNavigate=(address,lng,lat)=>{......
  • 微信小程序云开发中的command简介
    微信小程序云开发（WeChatMiniProgramCloudDevelopment）是微信官方推出的一种简化小程序开发的方案。它提供了一个完整的后端云服务，支持数据库、存储、云函数等功能。在云开发中，Command是一个重要的概念，主要用于操作数据库。Command是数据库命令的构造器，它用于构造复杂的数据......
  • 微信小程序打开pdf文件，并支持保存分享等操作
    微信小程序直接下载文件时，保存到的路径为缓存路径tempxxx，如果需要查找文件就很麻烦，那我们可以先在小程序中预览文件，再执行后续操作，代码如下：//方法constdownload=(type)=>{const{url='',name}=type;if(!url)return;console.log('uuuu',url,nam......
  • Qt之QTableWidget的使用
    #ifndefMAINWINDOW_H#defineMAINWINDOW_H#include<QtWidgets>#include<QDebug>#include<QJsonArray>#include<QJsonObject>#include<QJsonValue>#include<QJsonDocument>#defineTABLE_HEADER_STYLE"QHeaderVie......
  • 微信小程序获取用户位置 getLocation
    首先在app.config.json中配置exportdefaultdefineAppConfig({pages:[],permission:{"scope.userLocation":{"desc":"你的位置信息将用于小程序位置接口的效果展示"}},})方法调用：constgetLocation=()=>{Taro.getLocation({......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99