微信小程序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. 确诊了原发性高血压后，几乎都需要终身服药。“几个疗程根治高血压”“不会复发”的宣传，都是骗人的。\n2. 比起血压高，血压波动危害更大，所以一定要按时按量服药，不要轻易减量或停药。目前常用的降压药，副作用少也轻，不用担心，控制好病情更要紧。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() {}
})