1. Toy模板网首页
  2. > Toy博客

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

9月前 作者：baorant在写代码 分类：Toy博客 阅读(45) 违法举报

这篇具有很好参考价值的文章主要介绍了微信小程序实现tab切换和数据列表。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

问题背景

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

问题分析

微信小程序对应页面文件结构如下： 微信小程序tab切换,微信小程序,小程序,微信

问题解决

话不多说，直接上代码： (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: ''
  },
 
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad() {
    
  },
 
  //点击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;
}

运行结果如下： 微信小程序tab切换,微信小程序,小程序,微信

问题总结

本文介绍了微信小程序如何实现tab切换和数据列表，有兴趣的同学可以进一步深入研究。文章来源地址https://www.toymoban.com/news/detail-754125.html

到了这里，关于微信小程序实现tab切换和数据列表的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • 【微信小程序】实现页面tab切换效果

    【微信小程序】实现页面tab切换效果

    目录 前言 本次效果展示 一、如何实现页面tab 1.使用内置组件scroll-view 2.实现点击时出现的背景样式 3.使用scroll-into-view，实现点击时自动滚动 本次主要内容是介绍页面tab的开发，如何实现tab与页面内容联动呢？关注我就知道！   如下图所示，我们需要使用到红色框框中的属

    2024年02月09日
    浏览(94)
  • 快速掌握微信小程序 tab 切换的实现技巧（可滑动切换）

    快速掌握微信小程序 tab 切换的实现技巧（可滑动切换）

    微信小程序中的 tab 切换功能可以说是用户所需的一个基础功能。本文将介绍如何通过微信小程序实现 tab 切换功能，为用户带来更为便捷和高效的小程序体验。 其实这个小功能的实现非常简单，只需要通过一个标识控制选项的样式及显示的内容，当我们触发点击或者滑动事

    2024年02月11日
    浏览(71)

  • uniapp 微信小程序实现监听屏幕左右滑动实现tab标签切换效果

            实际的项目开发之中，有很多所谓的奇葩需求，当工程量相对较大的时候去更换组件会显得特别麻烦和费时。我这次的需求因为某些特殊原因，更换组件后也无法实现需要达到的效果，所以最后只能监听滑动事件，相信你看了我的代码也能轻松搞定！          

    2024年02月14日
    浏览(60)
  • 微信小程序tab加列表demo

    微信小程序tab加列表demo

    一、效果 代码复制即可使用，记得把图标替换成个人工程项目图片。 微信小程序开发经常会遇到各种各样的页面组合，本demo为list列表与tab组合，代码如下： 二、json代码 三、xml 四、css 五、ts代码

    2024年02月14日
    浏览(35)
  • 微信小程序 列表多选 下拉分页 滑动切换分类

    微信小程序 列表多选 下拉分页 滑动切换分类

    1、卡片列表 2、分页（下拉页面加载分页数据） 3、分类（页面间互不干扰，数据也不干扰） 4、左右滑动可切换分类 5、列表搜索 6、单选模式（默认单选模式，即点击卡片，回写所选数据） 7、 多选 模式（实现微信聊天多选效果） 长按 列表或 点击多选 ，进入多选模式；

    2024年02月03日
    浏览(41)
  • 微信小程序实现左右滑动进行切换数据页面（touchmove）

    微信小程序实现左右滑动进行切换数据页面（touchmove）

    手指触摸左右滑动进行切换数据 需要实现的是有一个tab栏,点选某一个tab的时候切换页面，手势滑动，左滑右滑效果和点击tab一样切换页面数据。 这里我们要先了解几个微信的事件属性 touchstart ： 手指触摸动作开始 touchmove：手指触摸后移动 touchcancel：手指触摸动作被打断，

    2024年02月11日
    浏览(62)
  • 【微信小程序】页面tab栏与页面内容联动_微信小程序实现tabs跟下面的内容联动

    【微信小程序】页面tab栏与页面内容联动_微信小程序实现tabs跟下面的内容联动

    先自我介绍一下，小编浙江大学毕业，去过华为、字节跳动等大厂，目前阿里P7 深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！ 因此收集整理了一份《2024年最新大数据全套学习资料》，

    2024年04月28日
    浏览(41)

  • 微信小程序 如何实现列表

    微信小程序中实现列表可以通过使用「scroll-view」组件或「list」组件来实现。 使用「scroll-view」组件：可以使用 wx:for 指令来循环渲染列表中的数据，并为每个元素设置相应的样式。 使用「list」组件：该组件已经内置了列表的常用功能，包括列表渲染、上拉加载、下拉刷新等

    2024年02月11日
    浏览(40)
  • 【微信小程序入门到精通】— 微信小程序实现多页面切换（tabBar）

    【微信小程序入门到精通】— 微信小程序实现多页面切换（tabBar）

    对于目前形式，微信小程序是一个热门，那么我们该如何去学习并且掌握之后去做实际项目呢？ 为此我特意开设此专栏，在我学习的同时也将其分享给大家！ 本篇文章将给大家带来如何添加页面切换效果，我们前面所讲解的都是停留在某一页面上面进行预览，接下来我们将

    2024年02月03日
    浏览(105)
  • 小程序 | 微信小程序实现商品分类列表

    小程序 | 微信小程序实现商品分类列表

    小程序 | 微信小程序实现商品分类列表 一、效果展示 二、代码实现

    2024年02月11日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包