微信小程序实现列表及tab标签

最新推荐文章于 2024-06-23 12:03:26 发布
最新推荐文章于 2024-06-23 12:03:26 发布
阅读量2.5k 收藏 30
点赞数
分类专栏： 微信小程序 文章标签： 微信小程序 家属订单 Tab切换 滑动列表 页面布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shi450561200/article/details/128394148
版权

一、效果图

二、代码部分

   代码复制就可以使用，但需要注意的是xml文件部分，相关的图片资源引用需要自行替换，发话不多说直接看代码。

a、json文件代码

{
  "usingComponents": {},
  "navigationBarBackgroundColor": "#F2F2F2",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": " 家属订单",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light",
  "navigationStyle": "custom"
}

b、tabchange.wxml文件代码

<!--pages/personal/persontranction/myoppoint/oppointment.wxml-->
<!-- 头部标题 -->
<view class="title_search">
  <view class="seeck_md">
    <!-- 返回 -->
    <view class="logout" bindtap="logout">
      <image class="logout_ic" src="/images/return_back.png">
      </image>
      <text class="logout_txt">返回</text>
    </view>
    <!--消息-->
    <view class="msg_title_center">
      <view class="msg" bindtap="open_msg">
        <text class="msg_txt">家属订单</text>
      </view>
    </view>
  </view>
  <view class="logout">
    <image class="logout_ic">
    </image>
    <text class="logout_txt"></text>
  </view>
</view>
<view>
  <!-- Tab布局 -->
  <!-- 家属成员 -->
  <scroll-view class="scroll-view_H" scroll-x="true" bindscroll="scroll" style="width: 100%">
    <view class="head_list">
      <!-- 李XX -->
      <block wx:for="{{listItem}}" wx:key="id" wx:for-item="itemName" wx:for-index="id">
        <view class="{{itemCheck[id].isChecked?'head_list_item_one_ed':'head_list_item_one'}}" catchtap="family_tap" id="{{id}}">
          <view class="head_list_item_one_im_parent" catchtap="family_tap" id="{{id}}">
            <image class="head_list_item_one_im" catchtap="family_tap" src="/images/lemon.png" id="{{id}}"></image>
          </view>
          <text class="{{itemCheck[id].isChecked?'head_list_item_one_txt_ed':'head_list_item_one_txt'}}"  catchtap="family_tap" id="{{id}}">{{itemName.realName}}
          </text>
        </view>
      </block>
    </view>
  </scroll-view>
  <!-- 导航栏navigationbar -->
  <view class='navBox'>
    <view class='titleBox' id="allaid" bindtap='titleClick' data-idx='0'>
      <text class="{{0 == currentIndex ? 'fontColorBox' : ''}}">待接收</text>
      <hr class="{{0 == currentIndex ? 'lineBox' : 'notLineBox'}}" />
    </view>
    <view class='titleBox' id="aiding" bindtap='titleClick' data-idx='1'>
      <text class="{{1 == currentIndex ? 'fontColorBox1' : ''}}">待处理</text>
      <hr class="{{1 == currentIndex ? 'lineBox' : 'notLineBox'}} " />
    </view>
    <view class='titleBox' id="aidfinish" bindtap='titleClick' data-idx='2'>
      <text class="{{2 == currentIndex ? 'fontColorBox2' : ''}}">已完成</text>
      <hr class="{{2== currentIndex ? 'lineBox' : 'notLineBox'}} " />
    </view>
  </view>
  <!-- 内容布局 -->
  <swiper class='swiperTtemBox' bindchange='pagechange' current='{{currentIndex}}'>
    <!--待接收 -->
    <swiper-item class='swiperTtemBox' catchtouchmove='onTouchMove'>
      <scroll-view class='scbg' scroll-y='true'>
        <block wx:for="{{receivedList}}" wx:key="id" wx:for-item="itemName" wx:for-index="id">
          <view class='box'>
            <view class='firstblock'>
              <!-- 日期 -->
              <view class="item_State">
                <view class="state_bg">
                  <!-- 可添加背景状态图片 -->
                  <image class="img_state_bg" src=""> </image>
                  <text class='txt_state_bg'>待接收</text>
                </view>
                <view class='item_first_title'>
                  <text class='showdataone'>{{itemName.serviceTime==null?'':itemName.serviceTime}}</text>
                  <text class='dataunit'>{{itemName.workTime==null?'':itemName.workTime}}</text>
                </view>
              </view>
              <view class='tel'>
                <!-- 可添加背景状态图片 -->
                <image class="imge_appoint_tag" src=""></image>
                <text class='showdata_conn'>{{itemName.brandName}}</text>
              </view>
            </view>
          </view>
        </block>
      </scroll-view>
    </swiper-item>
    <!-- 待处理 -->
    <swiper-item class='swiperTtemBox' catchtouchmove='onTouchMove'>
      <scroll-view class='scbg' scroll-y='true'>
        <block wx:for="{{dealedList}}" wx:key="id" wx:for-item="itemName" wx:for-index="id">
          <view class='box'>
            <view class='firstblock'>
              <!-- 日期 -->
              <view class="item_State">
                <view class="state_bg">
                  <image class="img_state_bg" src=""> </image>
                  <text class='txt_state_bg'>待处理</text>
                </view>
                <view class='item_first_title'>
                  <text class='showdataone'>{{itemName.serviceTime}}</text>
                  <text class='dataunit'>{{itemName.workTime}}</text>
                </view>
              </view>
              <view class='tel'>
                <!-- 可添加背景状态图片 -->
                <image class="imge_appoint_tag" src=""></image>
                <text class='showdata_conn'>{{itemName.brandName}}</text>
              </view>
            </view>
          </view>
        </block>
      </scroll-view>
    </swiper-item>
    <!-- 已完成 -->
    <swiper-item class='swiperTtemBox' catchtouchmove='onTouchMove'>
      <scroll-view class='scbg' scroll-y='true'>
        <block wx:for="{{finishedList}}" wx:key="id" wx:for-item="itemName" wx:for-index="id">
          <view class='box'>
            <view class='firstblock'>
              <!-- 日期 -->
              <view class="item_State">
                <view class="state_bg">
                  <!-- 可添加背景状态图片 -->
                  <image class="img_state_bg" src=""> </image>
                  <text class='txt_state_bg'>已完成</text>
                </view>
                <view class='item_first_title'>
                  <text class='showdataone'>{{itemName.serviceTime}}</text>
                  <text class='dataunit'>{{itemName.workTime}}</text>
                </view>
              </view>
              <view class='tel'>
                <!-- 可添加背景状态图片 -->
                <image class="imge_appoint_tag" src=""></image>
                <text class='showdata_conn'>{{itemName.brandName}}</text>
              </view>
            </view>
          </view>
        </block>
      </scroll-view>
    </swiper-item>
  </swiper>
</view>

c、tabchange.wxss代码

/* pages/personal/persontranction/myoppoint/oppointment.wxss */
Page {
  background: #f0f0f0;
  height: 100%;
  position: fixed;
}

.fontColorBox,
.fontColorBox1,
.fontColorBox2{
  /* 文字默认颜色 */
  color: #00c6ac;
}

.navBox {
  /* 顶部tab盒子样式 */
  width: 100%;
  height: 90rpx;
  background: white;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

#aiding,
#aidfinish{
   margin-left: 0rpx;
}

.titleBox {
  /* 未选中文字的样式 */
  color: rgb(168, 170, 175);
  font-size: 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: 250rpx;
  height: 100%;
}
.lineBox,.notLineBox{
  /* 选中及未选中底线共同样式 */
  width: 60rpx;
  height: 4rpx;
  margin-top: 16rpx;
  border-radius: 4rpx;
}

.lineBox {
  /* 选中底线样式 */
  background: #00c6ac;
  width: 250rpx;
  height: 4rpx;
  margin-top: 16rpx;
  border-radius: 4rpx;
}

.notLineBox {
  /* 未选中底线样式 */
  background: transparent;
    width: 250rpx;
  height: 4rpx;
}

.swiperTtemBox {
  /* 底部内容样式 */
  height: 100vh;
  overflow: scroll;
  margin: 0rpx 0rpx;
  background: #f0f0f0;
  font-size: 28rpx;
}

.box {
  background-color: white;
  margin-top: 20rpx;
  border-radius: 20rpx;
  margin-left: 30rpx;
  margin-right: 30rpx;
}

.firstblock {
  height: 150rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 20rpx;
  flex-direction: row;
  padding-right: 30rpx;
}

.showtime {
  font-size: 24rpx;
  color: #e3e3e3;
  font-family: PingFangSC-regular;
}

/* 左侧标记 */
.item_first_title{
  margin-top: 0rpx;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  margin-left: 30rpx;
}
.state_bg{
  width: 200rpx;
  display: flex;
  align-items: center;
}
.img_state_bg{
  width: 160rpx;
  height: 60rpx;
}

.txt_state_bg{
  position: absolute;
  margin-left: 30rpx;
}

.dataunit{
  margin-left: 10rpx;
  color: #e3e3e3;
}

/* item右侧标记 */
.tel{
  margin-top: 0rpx;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
 .showdata_conn{
  font-size: 28rpx;
  color: #000000;
  font-family: PingFangSC-regular;
  margin-top: 10rpx;
 }

.imge_appoint_tag{
  width: 40rpx;
  height: 40rpx;
}

.showdataone {
  font-size: 28rpx;
  color: #e3e3e3;
  margin-top: 10rpx;
}
/* item右侧标记 */

.showdatatwo {
  font-size: 32rpx;
  color: #000000;
  font-weight: bold;
  font-family: PingFangSC-regular;
}

/* scroolview布局 */
.scbg {
  background-color: #EFEFEF;
  width: 100%;
  height: calc(100vh - 420rpx);
  left: 0rpx;
  right: 0rpx;
  top: 0rpx;
  padding-bottom: 10rpx;
}


/* 头部搜索 */
/* 搜索标题 */
.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: flex-start;
  align-items: flex-end;
}

/* 消息 */
.msg{
  width: 180rpx;
  height: 90rpx; 
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-right: 0rpx;
  margin-left: 30rpx;

}

.msg_title_center{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.msg_txt{
  font-size: 36rpx;
  height: 80rpx;
  width: 160rpx;
  margin-bottom: 20rpx;
  align-items: center;
  color: #fff;
  display: flex;
  justify-content: center;
}

/* 返回 */
.logout{
  width: 100rpx;
  height: 90rpx; 
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-right: 20rpx; 
  margin-left: 30rpx;
}
.logout_ic{
  height: 44rpx;
  width: 48rpx;
  margin-right: 2rpx;
}
.logout_txt{
  font-size: 24rpx;
  height: 40rpx;
  width: 60rpx;
  margin-bottom: 10rpx;
  align-items: flex-start;
  color: #fff;
  display: flex;
  justify-content: flex-start;
}
/* 搜索标题 */
/* 头部搜索  */

/* 家属横向列表 */
.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;
}

/* 家属选背景 */

d、tabchange.ts代码

// pages/personal/persontranction/myoppoint/oppointment.ts
const appointid = getApp()
Page({
  data: {
    currentIndex: 0, //默认是活动项
    list: [],
    receivedList:[{serviceTime:"2021-10-01",workTime:"10:12",brandName:"hash"},
    {serviceTime:"2021-11-01",workTime:"10:12",brandName:"sdcvav"}],//待接收
    dealedList:[{serviceTime:"2021-10-01",workTime:"10:12",brandName:"hash"},
    {serviceTime:"2021-11-01",workTime:"10:12",brandName:"sdcvav"}],//待处理
    finishedList:[{serviceTime:"2021-10-01",workTime:"10:12",brandName:"hash"},
    {serviceTime:"2021-11-01",workTime:"10:12",brandName:"sdcvav"},{serviceTime:"2021-10-01",workTime:"10:12",brandName:"hash"},
    {serviceTime:"2021-11-01",workTime:"10:12",brandName:"sdcvav"}],//已完成
    itemCheck: [{ "id": 0, "isChecked": true, }, { "id": 1, "isChecked": false, }, { "id": 2, "isChecked": false, }, { "id": 3, "isChecked": false, }, { "id": 4, "isChecked": false, }, { "id": 5, "isChecked": false, }, { "id": 6, "isChecked": false, }, { "id": 7, "isChecked": false, }, { "id": 8, "isChecked": false, }, { "id": 9, "isChecked": false, }, { "id": 10, "isChecked": false, }, { "id": 12, "isChecked": false, }],//状态标记
    listItem: [{realName:"大明"},{realName:"大宝"},{realName:"mogu"}],//数据列表数据
    patintIdS: '',
    stateDataId:''
  },
  //返回上一级页面
  logout: function () {
    wx.navigateBack({})
  },
  //点击tab时触发
  titleClick: function (e: any) {
    var that=this;
    this.setData({
      //拿到当前索引并动态改变
      currentIndex: e.currentTarget.dataset.idx
    })

    // if(e.currentTarget.dataset.idx==0){
    //   that.data.stateDataId=1+"";
     
    // }else if(e.currentTarget.dataset.idx==1){
    //   that.data.stateDataId=2+"";
   
    // }else if(e.currentTarget.dataset.idx==2){
    //   that.data.stateDataId=0+"";

    // }
    // console.log("======拿到当前索引并动态改变=dddd======"+e.currentTarget.dataset.idx)
  },

  onLoad(){
    var that = this;
    that.data.stateDataId=1+"";

  },

  //选中那个家庭成员
  family_tap: function (e: any) {
    var that = this;
    var ids = e.target.id;//点击当前位置

    for (var i = 0; i < that.data.itemCheck.length; i++) {
      that.data.itemCheck[i].isChecked = false;
    }
    that.data.itemCheck[ids].isChecked = true;
    that.data.patintIdS = that.data.listItem[ids].patientId + "";

    that.setData({
      itemCheck: that.data.itemCheck
    })

  },


})

最后总结，代码逻辑有多种实现方式，以上只是其中一种，仅供交流使用。

人民的石头
关注
  • 0
    点赞
  • 踩
  • 30
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序实现列表的横向滑动方式
01-19
微信小程序原生方式实现列表的横向滑动的两种方法： 效果图： 方式一：简单样式实现 父元素设置： white-space:nowrap;//不换行 overflow-x: auto;子元素设置： display:inline-block; 方式二：scroll-view 标签 + ...
【微信小程序——案例——本地生活（列表页面）】
weixin_45753504的博客
04-14 1580
黑马程序课程本地生活案例——列表添加实现
微信小程序 如何实现列表
weixin_42609225的博客
02-15 3961
微信小程序中实现列表可以通过使用「scroll-view」组件或「list」组件来实现。 使用「scroll-view」组件：可以使用 wx:for 指令来循环渲染列表中的数据，并为每个元素设置相应的样式。 使用「list」组件：该组件已经内置了列表的常用功能，包括列表渲染、上拉加载、下拉刷新等，开发者可以直接使用该组件来实现列表功能。 例如： <scroll-view class=...
学习微信小程序的页面布局与响应式设计【含代码示例】
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
06-23 1347
本文将从基础概念出发，深入探讨微信小程序中常用的布局方式、响应式设计技巧，以及实际开发中的最佳实践，为开发者提供一套全面且实战导向的指南。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。通过上述讲解与示例，希望读者能够掌握微信小程序页面布局与响应式设计的核心技巧，结合实际开发经验，不断探索与创新，创造出既美观又实用的小程序界面。一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身农奴把歌唱，，为我们广大开发同胞谋福祉，
小程序基本命令
aiven1637的博客
10-30 3283
onLoad: function () { // 生命周期函数--监听页面加载 onReady: function () { // 生命周期函数--监听页面初次渲染完成 }, onShow: function () { // 生命周期函数--监听页面显示 }, onHide: function () { // 生命周期函数--监...
微信小程序开发常用组件（标签）和API详解
weixin_73318685的博客
04-26 1271
小程序常用组件标签，view，text，常用基础内容组件，以及小程序api的三大分类
微信小程序--列表展示
weixin_51747920的博客
04-24 3533
例题采用了scroll-view和swiper组件。二维甚至多维数组应该如何遍历？
微信小程序tab加列表demo
shi450561200的博客
07-31 2097
代码复制即可使用，记得把图标替换成个人工程项目图片。
微信小程序自定义tab实现多层tab嵌套功能
12-01
在微信小程序开发中，有时会遇到复杂的需求，例如在同一个页面中实现多层Tab的嵌套。这种情况通常发生在需要提供丰富导航层级的大型应用中，以便用户能够方便地浏览和操作各种内容。本文将深入探讨如何在微信小程序...
微信小程序滚动Tab实现左右可滑动切换
12-10
在微信小程序中，实现滚动Tab左右可滑动切换的效果，主要涉及到`scroll-view`和`swiper`两个组件的使用。以下是对这个实现过程的详细解释： 1. **使用`scroll-view`组件**： - `scroll-view`是微信小程序中的一个...
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
11-30
在微信小程序中，实现类似今日头条那样可滑动切换的导航栏和内容滚动同步的效果，主要涉及到以下几个关键知识点： 1. **布局结构**： - 主体页面通常采用两层结构，外层是一个横向滚动的`<scroll-view>`作为导航栏...
微信小程序 swiper制作tab切换实现附
08-31
在微信小程序中，Swiper组件常用于创建滑动轮播图或者实现页面间的tab切换效果。本教程将详细讲解如何利用Swiper组件制作一个简单的tab切换功能。 首先，我们需要了解Swiper组件的基本结构。在提供的代码片段中，...
微信小程序之多列表的显示和隐藏功能【附源码】
coldriversnow的专栏
04-14 3373
效果图： 实现思路： 实现单个列表的显示和隐藏应该使用唯一元素让程序知道你应该显示和隐藏哪个列表项，可以用数据的id； css中定义一个hidden{display：none}控制显示和隐藏，然后通过三元运算符来判断； wxml定义一个点击事件来动态修改这个列表项的变量值。 功能实现： 好了，思路有了，就开始按照思路来用代码验证。果不其然，使用代码实现之后，发现自己的思路还是没错的。此功能点也可以应用到其它类似的列表的显示和隐藏中。 示例代码： <!--pages/myOrder/
【微信小程序】基础篇 -- 案例 - 本地生活（列表页面）（三十）
热门推荐
JMFive的博客
03-09 1万+
大家好，又见面了，我是夜阑的狗🐶，本文是专栏【微信小程序开发教程】专栏的第30篇文章;今天开始学习微信小程序的第15天💖💖💖，开启新的征程，记录最美好的时刻🎉，每天进步一点点。 此专栏是我是夜阑的狗微信小程序开发过程的总结，希望能够加深自己的印象，以及帮助到其他的小伙伴😉😉。如果文章有什么需要改进的地方还请大佬不吝赐教👏👏。🌹 🌹 🌹也欢迎你，关注我。👍 👍 👍！！💕 💕 💕 最后，本文仍有许多不足之处，欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正！下期再见。
微信小程序中使用table
Hassan的小博客!
02-03 5032
小程序中使用table
微信小程序实现瀑布流布局效果
shi450561200的博客
06-09 1514
3、js代码初始化数据。
Python+微信小程序开发（三）开发小程序及页面布局_python 微信小程序开发
2301_76225520的博客
04-18 733
对于从来没有接触过网络安全的同学，我们帮你准备了详细的学习成长路线图。可以说是最科学最系统的学习路线，大家跟着这个大的方向学习准没问题。费时一周整理的160+网络安全面试题，金九银十，做网络安全面试里的显眼包！所以我们新建一个app.js，就解决了，最后生成一个二维码，扫描二维码就能在手机上看看自己做的小程序效果如何。最后给大家分享一份全套的网络安全学习资料，给那些想学习 网络安全的小伙伴们一点帮助！对于有1-3年工作经验，想要跳槽的朋友来说，也是很好的温习资料！，大家跟着这个大的方向学习准没问题。
微信小程序手写table表格
zybijiso666的博客
11-15 923
wxss:想加其他样式得可以自己+总结：有循环的可以自己填写数据。
【微信小程序——开发DAY2（黑马程序员课程）】
weixin_45753504的博客
04-10 825
黑马程序员小程序开发课程Day2
微信小程序tab切换
06-20
微信小程序中的TabBar是用于展示小程序的主要入口和导航栏，用户可以通过它在不同功能模块之间进行切换。TabBar通常位于小程序底部，包含固定数量的选项卡，每个选项卡对应小程序的一个页面或功能。 以下是TabBar的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值