微信小程序tab加列表demo

一、效果

代码复制即可使用，记得把图标替换成个人工程项目图片。

微信小程序开发经常会遇到各种各样的页面组合，本demo为list列表与tab组合，代码如下：

二、json代码

{
  "usingComponents": {},
  "navigationStyle": "custom"
}

三、xml

<!--pakagehealthy/pages/healthy_report/HealthyReportPages.wxml-->
<!-- 头部标题 -->
<view class="title_search">
  <view class="seeck_md">
    <!-- 返回 -->
    <view class="logout" bindtap="logout">
      <image class="logout_ic" src="/images/msg/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>

<!-- 导航栏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'>
    <!-- 健康报告基本情况 -->
    <view class="head_monitors">
      <view class="head_basic_info">基本情况</view>
      <view class="head_basic_conn">
        <!-- 身高 -->
        <view style="display: flex;flex-direction: column;margin-left: 20rpx;margin-right: 10rpx;">
          <view class="person_height" style="color: #00c6ac;font-size: 28rpx;">身高: </view>
          <view class="person_number" style="color: #333;font-size: 28rpx;">170cm</view>
        </view>
        <!-- 体重 -->
        <view style="display: flex;flex-direction: column;margin-left: 10rpx;margin-right: 10rpx;">
          <view class="person_height" style="color: #00c6ac;font-size: 28rpx;">体重: </view>
          <view class="person_number" style="color: #333;font-size: 28rpx;">80kg</view>
        </view>
        <!-- BMI(体重/身高) -->
        <view style="display: flex;flex-direction: column;margin-left: 10rpx;margin-right: 10rpx;">
          <view class="person_height" style="color: #00c6ac;font-size: 28rpx;">BMI(体重/身高): </view>
          <view class="person_number" style="color: #333;font-size: 28rpx;">24.8</view>
        </view>
        <!-- 整体情况 -->
        <view style="display: flex;flex-direction: column;margin-left: 10rpx;margin-right: 20rpx;">
          <view class="person_height" style="color: #00c6ac;font-size: 28rpx;">整体情况: </view>
          <view class="person_number" style="color: #333;font-size: 28rpx;">偏胖</view>
        </view>
      </view>
    </view>

    <view style="width:92%">
    <scroll-view class='scbg_monitors' scroll-y='true'>
      <block wx:for="{
   
   {4}}" wx:key="id" wx:for-item="itemName" wx:for-index="id">
        <view class='box'>
          <view class='services_estimate_box'>
            <!-- 评估box item头 -->
            <view class='services_estimate_head'>
              <image class="services_estimate_pic" src="/images/de.png"></image>
            </view>
             
            <!--  评估文字内容 -->
            <view class='services_estimate_conn'>
              <view class="services_estimate_conn_title">中风针灸治疗</view>
              <view class="services_estimate_conn_cont">第一，不主张吃高脂肪、高油的食物；第二，久坐、不运动的人群，肠癌发生率高，有可能的情况下尽量不开车、走路、坐公交，这样运动多了，疾病也就会减少了</view>
            </view>

            <!--  评估 查看更多 -->
            <view class='services_estimate_appoint'>
              <view class="services_estimate_appoint_bt">查看更多</view>
            </view>
          
          </view>
          <view wx:if="{
   
   {id!=3}}" style="margin-left: 28rpx;margin-right: 0rpx;width: 93%;border-bottom: 0.1px solid rgb(235, 232, 232);"></view>
        </view>
      </block>
    </scroll-view>
  </view>
  </swiper-item>

  <!-- 健康指导 -->
  <swiper-item class='swiperTtemBox' catchtouchmove='onTouchMove'>
    <scroll-view class='scbg' scroll-y='true'>
      <block wx:for="{
   
   {1}}" wx:key="id" wx:for-item="itemName" wx:for-index="id">
        <view class='healthy_guide_box'>
          <!--健康指导-->
          <view class="healthy_report_title">
            健康指导：
          </view>

          <!-- 检查报内容模块 -->
          <view class="healthy_suggest_content">
            1. 确诊了原发性高血压后，几乎都需要终身服药。“几个疗程根治高血压”“不会复发”的宣传，都是骗人的。\n
            2. 比起血压高，血压波动危害更大，所以一定要按时按量服药，不要轻易减量或停药。目前常用的降压药，副作用少也轻，不用担心，控制好病情更要紧。
            3. 普通高血压人群血压要控制在140/90mmHg以下，如果合并糖尿病或肾脏疾病，要更严格。
            HTML 行间距的设置方法与问题 　　我们可以用:
            喝水这件事可不是多多益善，成人的肾脏每小时只能排水800到1000毫升，如果你在1小时内喝水超过1000毫升，反而会导致低钠血症，影响肾脏健康。所以，每次喝水不要超过100毫升，每小时喝水不要超过1000毫升。
          </view>
        </view>
      </block>
    </scroll-view>
  </swiper-item>

  <!-- 服务推荐 -->
  <swiper-item class='swiperTtemBox' catchtouchmove='onTouchMove'>
    <scroll-view class='scbg' scroll-y='true'>
      <block wx:for="{
   
   {1}}" wx:key="id" wx:for-item="itemName" wx:for-index="id">
        <view class='services_recommend_box'>

          <!-- 服务推荐box item头 -->
          <view class='serv_rec_head'>
            <image class="services_head_pic" src="/images/de.png"></image>
          </view>

          <!-- 服务推荐文字内容 -->
          <view class='serv_rec_conn'>
            <view class="serv_rec_conn_title">中风针灸治疗</view>
            <view class="serv_rec_conn_cont">第一，不主张吃高脂肪、高油的食物；第二，久坐、不运动的人群，肠癌发生率高，有可能的情况下尽量不开车、走路、坐公交，这样运动多了，疾病也就会减少了</view>
          </view>

          <!-- 服务推荐 立即预约 -->
          <view class='serv_rec_appoint'>
            <view class="appoint_bt">立即预约</view>
          </view>

        </view>
      </block>
    </scroll-view>
  </swiper-item>
</swiper>

四、css

/* pakagehealthy/pages/healthy_report/HealthyReportPages.wxss */
/* 头部搜索 */
/* 搜索标题 */
.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;
}

/* scroll-view去掉滚动条 */
scroll-view ::-webkit-scrollbar {
  display:none;
  width:0;
  height:0;
  color:transparent;
}

.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;
}

/* 搜索标题 */
/* 头部搜索  */

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

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

#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;
}

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

/* 评估结果页面背景*/
.scbg_monitors {
  background-color: #ffffff;
  width: 100%;
  height: calc(100vh - 280rpx);
  left: 0rpx;
  right: 0rpx;
  top: 0rpx;
  margin-top: 20rpx;
  margin-left: 30rpx;
  margin-right: 30rpx;
  border-radius: 10rpx;
  padding-bottom: 10rpx;
}

/* 评估结果 */
/* 基本情况 模块*/
.head_monitors {
  background-color: #fff;
  margin-top: 20rpx;
  height: 170rpx;
  margin-left: 30rpx;
  margin-right: 30rpx;
  border-radius: 10rpx;
}

/* 基本情况 */
.head_basic_info {
  font-weight: 800;
  font-size: 30rpx;
  padding-top: 20rpx;
  width: 100%;
  border-radius: 10rpx;
  align-items: center;
  justify-content: center;
  display: flex;
}

/* 基本情况内容 */
.head_basic_conn {
  width: 100%;
  height: 90rpx;
  border-radius: 10rpx;
  flex-direction: row;
  display: flex;
  align-items: center;
  margin-top: 8rpx;
  justify-content: space-around;
}

/* style="border-bottom: 0.1px solid rgb(245, 240, 240); */
.services_estimate_box {
  background-color: #fff;
  height: 150rpx;
  margin-left: 20rpx;
  margin-right:10rpx;
  margin-top: 20rpx;
  border-radius: 10rpx;
  display: flex;
  align-items: center;
  flex-direction: row;
}

/* 评估结果 */
.services_estimate_head {
  height: 150rpx;
  width: 120rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 0rpx;
  border-radius: 10rpx;
}

.services_estimate_pic {
  height: 80rpx;
  width: 80rpx;
  border-radius: 40srpx;
}

.services_estimate_conn {
  width: 100%;
  height: 160rpx;
}

.services_estimate_conn_title {
  margin-top: 20rpx;
  margin-left: 20rpx;
  font-weight: 600;
  font-size: 28rpx;
}

/* 评估文字内容 */
.services_estimate_conn_cont {
  font-size: 26rpx;
  color: #333333;
  margin-top: 6rpx;
  margin-left: 20rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.services_estimate_appoint {
  width: 260rpx;
  height: 150rpx;
  border-radius: 10rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content:center;
  margin-bottom: 40rpx;
}

.services_estimate_appoint_bt {
  margin-top: 20rpx;
  margin-right: 0rpx;
  text-align: center;
  height: 50rpx;
  width: 140rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26rpx;
  color: #00c6ac;
  border-radius: 10rpx;
  border: #00c6ac solid 1rpx;
}

/* 服务推荐item */
.services_recommend_box {
  background-color: #fff;
  height: 150rpx;
  margin-left: 30rpx;
  margin-right: 30rpx;
  margin-top: 20rpx;
  border-radius: 10rpx;
  display: flex;
  align-items: center;
  flex-direction: row;
}

/* 服务推荐项目图片模块 */
.serv_rec_head {
  height: 150rpx;
  width: 120rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 20rpx;
  border-radius: 10rpx;
}

/* 服务推荐项目图片 */
.services_head_pic {
  height: 110rpx;
  width: 110rpx;
  border-radius: 55rpx;
}

/* 服务模块 */
.serv_rec_conn {
  width: 100%;
  height: 160rpx;
}

/* 服务推荐内容标题 */
.serv_rec_conn_title {
  margin-top: 20rpx;
  margin-left: 20rpx;
  font-weight: 600;
  font-size: 28rpx;
}

/* 服务推荐内容描述 */
.serv_rec_conn_cont {
  font-size: 26rpx;
  color: #333333;
  margin-top: 6rpx;
  margin-left: 20rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* 健康指导 */
.healthy_guide_box {
  background-color: #fff;
  margin-left: 30rpx;
  margin-right: 30rpx;
  border-radius: 10rpx;
  padding-left: 20rpx;
  padding-right: 20rpx;
  padding-bottom: 20rpx;
}

/* 健康指导标题 */
.healthy_report_title {
  width: 94%;
  color: #333;
  font-weight: bold;
  margin-top: 20rpx;
  padding-top: 20rpx;
  font-size: 34rpx;
}

/* 健康指导内容 */
.healthy_suggest_content {
  color: #333;
  font-size: 28rpx;
  font-weight: 540;
  width: 100%;
  text-indent: 2em;
  line-height: 50rpx;
  margin-top: 10rpx;
}


/* 服务推荐 */
.serv_rec_appoint {
  width: 260rpx;
  height: 150rpx;
  border-radius: 10rpx;
}

/* 立即预约 */
.appoint_bt {
  background-color: #fcb660;
  margin-top: 20rpx;
  margin-right: 20rpx;
  text-align: center;
  height: 50rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26rpx;
  color: #fff;
  border-radius: 10rpx;
}

五、ts代码

// pakagehealthy/pages/healthy_report/HealthyReportPages.ts
Page({

  /**
   * 页面的初始数据
   */
  data: {
    currentIndex: 0, //默认是待接收项
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad() {

  },

    //点击tab时触发
    titleClick: function (e: any) {
      var that = this;
      this.setData({
        //拿到当前索引并动态改变
        currentIndex: e.currentTarget.dataset.idx
      })
  
      if (e.currentTarget.dataset.idx == 0) {
    
      } else if (e.currentTarget.dataset.idx == 1) {
    
      } else if (e.currentTarget.dataset.idx == 2) {
       
      }
      // console.log("======拿到当前索引并动态改变=dddd======"+e.currentTarget.dataset.idx)
    },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  // 返回上一级
  logout(){
    wx.navigateBack({})
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})