一、效果
代码复制即可使用，记得把图标替换成个人工程项目图片。
微信小程序开发经常会遇到各种各样的页面组合，本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() {
}
})
![[MAUI 项目实战] 手势控制音乐播放器： 手势交互](https://img-blog.csdnimg.cn/img_convert/f5848c99eeec45cac180e1c9f5c4c825.gif)
