微信小程序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() {}
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/17394.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

matlab使用教程(6)—线性方程组的求解

进行科学计算时&#xff0c;最重要的一个问题是对联立线性方程组求解。在矩阵表示法中&#xff0c;常见问题采用以下形式&#xff1a;给定两个矩阵 A 和 b&#xff0c;是否存在一个唯一矩阵 x 使 Ax b 或 xA b&#xff1f; 考虑一维示例具有指导意义。例如&#xff0c;方程 …

20.3 HTML 表格

1. table表格 table标签是HTML中用来创建表格的元素. table标签通常包含以下子标签: - th标签: 表示表格的表头单元格(table header), 用于描述列的标题. - tr标签: 表示表格的行(table row). - td标签: 表示表格的单元格(table data), 通常位于tr标签内, 用于放置单元格中的…

奥迪A3:最新款奥迪A3内饰设计及智能科技应用

奥迪A3一直以来都是奥迪的入门级车型&#xff0c;但这并不意味着它在科技和内饰方面会有所退步。最新款奥迪A3的内饰设计和智能科技应用让人们再次惊叹奥迪的创新能力。 内饰设计 奥迪A3最新款的内饰设计引入了奥迪最新的设计元素&#xff0c;比如8.8英寸的中控显示屏&#xf…

干货 ,ChatGPT 4.0插件Review Reader,秒杀一切选品神器

Hi! 大家好&#xff0c;我是专注于AI项目实战的赤辰&#xff0c;今天继续跟大家介绍另外一款GPT4.0插件Review Reader&#xff08;评论阅读器&#xff09;。 做电商领域的小伙伴们&#xff0c;都知道选品分析至关重要&#xff0c;可以说选品决定成败&#xff0c;它直接关系到产…

【深度学习】High-Resolution Image Synthesis with Latent Diffusion Models,论文

13 Apr 2022 论文&#xff1a;https://arxiv.org/abs/2112.10752 代码&#xff1a;https://github.com/CompVis/latent-diffusion 文章目录 PS基本概念运作原理 AbstractIntroductionRelated WorkMethodPerceptual Image CompressionLatent Diffusion Models Conditioning Mec…

申请软件著作权都有什么好处?

随着社会的发展&#xff0c;知识产权保护意识对于公司而言尤为重要&#xff0c;对自己的权利进行最大限度的保护&#xff0c;以防止被别有用心的人侵权。那么&#xff0c;申请软著的好处到底是什么?软著有什么用呢? 无形资产软著是一种无形的知识产权&#xff0c;是开发者智慧…

Spark-对RDD的理解

RDD是分布式弹性数据集。 RDD有五大特性&#xff1a; 一组分区&#xff0c;每个RDD都会被分为多个分区&#xff0c;这些分区运行在集群的不同节点上&#xff0c;分区数决定并行计算的数量。一个计算每个分区的函数&#xff0c;就是计算逻辑。RDD之间的依赖关系&#xff0c;就…

大数据技术之Clickhouse---入门篇---数据类型、表引擎

星光下的赶路人star的个人主页 今天没有开始的事&#xff0c;明天绝对不会完成 文章目录 1、数据类型1.1 整型1.2 浮点型1.3 布尔型1.4 Decimal型1.5 字符串1.6 枚举类型1.7 时间类型1.8 数组 2、表引擎2.1 表引擎的使用2.2 TinyLog2.3 Memory2.4 MergeTree2.4.1 Partition by分…

简单分享婚宴预订小程序怎么做

婚宴预订小程序需要具备一些功能&#xff0c;通过这些功能&#xff0c;新人可以更方便地选择婚宴场地、预订服务&#xff0c;并且更好地规划自己的婚礼。 1. 场地浏览与选择 婚宴预订小程序可以展示多个婚宴场地的照片和详细信息&#xff0c;包括容纳人数、场地设施、价格等。…

无涯教程-Lua - Arrays(数组)

数组是对象的有序排列&#xff0c;可以是包含行集合的一维数组&#xff0c;也可以是包含多行和多列的多维数组。 在Lua中&#xff0c;数组是使用带有整数的索引表实现的。数组的大小不是固定的&#xff0c;并且可以根据无涯教程的要求(取决于内存限制)来增长。 一维数组 一维…

8.1作业

文件IO函数实现拷贝文件。子进程先拷贝后半部分&#xff0c;父进程再拷贝前半部分&#xff0c;允许使用sleep函数 #include<stdio.h> #include<string.h> #include<stdlib.h> #include<head.h> int main(int argc, const char *argv[]) {pid_t cpidfo…

指针初阶(1)

文章目录 目录1. 指针是什么2. 指针变量的类型2.1 指针变量-整数2.2 指针变量的解引用 3. 野指针3.1 野指针成因3.2 如何规避野指针 4. 指针运算4.1 指针-整数4.2 指针-指针4.3 指针的关系运算 附&#xff1a; 目录 指针是什么指针变量的类型野指针指针运算指针和数组二级指针…

面试总结(三)

1.进程和线程的区别 根本区别&#xff1a;进程是操作系统分配资源的最小单位&#xff1b;线程是CPU调度的最小单位所属关系&#xff1a;一个进程包含了多个线程&#xff0c;至少拥有一个主线程&#xff1b;线程所属于进程开销不同&#xff1a;进程的创建&#xff0c;销毁&…

【Vue组件eval方法的使用】

Vue页面中条件可以放在当前vue页面中而无需影响到组件 如 这是我的表格操作列按钮&#xff0c;需求是第四个按钮如果表格当前数据的is_execl字段为0则显示否则隐藏 这种条件判断很频繁 如果像之前一样给一个标识&#xff0c;页面多了就难以维护&#xff0c;而且判断条件如果不…

【硬件设计】模拟电子基础一--元器件介绍

模拟电子基础一--元器件介绍 一、半导体&#xff08;了解&#xff09;1.1 基础知识1.2 PN结 二、二级管2.1 定义与特性2.2 二极管的分类 三、三级管四、MOS管三、其他元器件管3.1 电容3.2 光耦3.3 发声器件3.4 继电器3.5 瞬态电压抑制器 前言&#xff1a;本章为知识的简单复习&…

【Spring框架】SpringBoot创建和使用

目录 什么是SpringBoot&#xff1f;SpringBoot优点创建SpringBootSpringBoot使用 什么是SpringBoot&#xff1f; Spring 的诞⽣是为了简化 Java 程序的开发的&#xff0c;⽽ Spring Boot 的诞⽣是为了简化 Spring 程序开发的。 SpringBoot优点 1.起步依赖(创建的时候就可以方…

Python爬虫遇到URL错误解决办法大全

在进行Python爬虫任务时&#xff0c;遇到URL错误是常见的问题之一。一个错误的URL链接可能导致爬虫无法访问所需的网页或资源。为了帮助您解决这个问题&#xff0c;本文将提供一些实用的解决方法&#xff0c;并给出相关代码示例&#xff0c;希望对您的爬虫任务有所帮助。 一、…

玩转顺序表——【数据结构】

在C语言学习中&#xff0c;我们经常会遇见增删查改等一系列操作&#xff0c;而这些操作全都与线性表关联&#xff0c;没有线性表将会对这些操作完成的十分艰难&#xff01;那今天就让我们来了解一下顺序表如何增删查改&#xff01;&#xff01;&#xff01; 目录 1.线性表 2…

运算放大器(二):恒流源

一、实现原理 恒流源的输出电流能够在一定范围内保持稳定&#xff0c;不会随负载的变化而变化。 通过运放&#xff0c;将输入的电压信号转换成满足一定关系的电流信号&#xff0c;转换后的电流相当一个输出可调的简易恒流源。 二、电路结构 常用的恒流源电路如…

C语言每日一题:11.《数据结构》链表分割。

题目一&#xff1a; 题目链接&#xff1a; 思路一&#xff1a;使用带头链表 1.构建两个新的带头链表&#xff0c;头节点不存储数据。 2.循环遍历原来的链表。 3.小于x的尾插到第一个链表。 4.大于等于x尾插到第二个链表。 5.进行链表合并&#xff0c;注意第二个链表的尾的下一…