微信小程序tab加列表demo

一、效果

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

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

二、json代码

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

三、xml

  
    
    
      
      
      返回
    
    
    
      
        健康报告
      
    
  
  
    
    
    
  




  
    评估结果
    

  
  
    健康指导
    

  
  
    服务推荐
    

  




  
  
    
    
      基本情况
      
        
        
          身高: 
          170cm
        
        
        
          体重: 
          80kg
        
        
        
          BMI(体重/身高): 
          24.8
        
        
        
          整体情况: 
          偏胖
        
      
    

    
    
      
        
          
            
            
              
            
             
            
            
              中风针灸治疗
              第一，不主张吃高脂肪、高油的食物；第二，久坐、不运动的人群，肠癌发生率高，有可能的情况下尽量不开车、走路、坐公交，这样运动多了，疾病也就会减少了
            

            
            
              查看更多
            
          
          
          
        
      
    
  
  

  
  
    
      
        
          
          
            健康指导：
          

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

  
  
    
      
        

          
          
            
          

          
          
            中风针灸治疗
            第一，不主张吃高脂肪、高油的食物；第二，久坐、不运动的人群，肠癌发生率高，有可能的情况下尽量不开车、走路、坐公交，这样运动多了，疾病也就会减少了
          

          
          
            立即预约
          

        
      
    
  

四、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() {

  }
})