网站培训公司,深圳市建设银行网站,东莞经济贸易学校网络营销,移动网络营销是什么一、效果
代码复制即可使用#xff0c;记得把图标替换成个人工程项目图片。 微信小程序开发经常会遇到各种各样的页面组合#xff0c;本demo为list列表与tab组合#xff0c;代码如下#xff1a;
二、json代码
{usingComponents: {},navigationStyle记得把图标替换成个人工程项目图片。 微信小程序开发经常会遇到各种各样的页面组合本demo为list列表与tab组合代码如下
二、json代码
{usingComponents: {},navigationStyle: custom
}
三、xml
!--pakagehealthy/pages/healthy_report/HealthyReportPages.wxml--
!-- 头部标题 --
view classtitle_searchview classseeck_md!-- 返回 --view classlogout bindtaplogoutimage classlogout_ic src/images/msg/return_back.png/imagetext classlogout_txt返回/text/view!--消息--view classmsg_title_centerview classmsg bindtapopen_msgtext classmsg_txt健康报告/text/view/view/viewview classlogoutimage classlogout_ic/imagetext classlogout_txt/text/view
/view!-- 导航栏navigationbar --
view classnavBoxview classtitleBox idallaid bindtaptitleClick data-idx0text class{{0 currentIndex ? fontColorBox : }}评估结果/texthr class{{0 currentIndex ? lineBox : notLineBox}} //viewview classtitleBox idaiding bindtaptitleClick data-idx1text class{{1 currentIndex ? fontColorBox1 : }}健康指导/texthr class{{1 currentIndex ? lineBox : notLineBox}} //viewview classtitleBox idaidfinish bindtaptitleClick data-idx2text class{{2 currentIndex ? fontColorBox2 : }}服务推荐/texthr class{{2 currentIndex ? lineBox : notLineBox}} //view
/view!-- 内容布局 --
swiper classswiperTtemBox bindchangepagechange current{{currentIndex}}!--评估结果 --swiper-item classswiperTtemBox catchtouchmoveonTouchMove!-- 健康报告基本情况 --view classhead_monitorsview classhead_basic_info基本情况/viewview classhead_basic_conn!-- 身高 --view styledisplay: flex;flex-direction: column;margin-left: 20rpx;margin-right: 10rpx;view classperson_height stylecolor: #00c6ac;font-size: 28rpx;身高: /viewview classperson_number stylecolor: #333;font-size: 28rpx;170cm/view/view!-- 体重 --view styledisplay: flex;flex-direction: column;margin-left: 10rpx;margin-right: 10rpx;view classperson_height stylecolor: #00c6ac;font-size: 28rpx;体重: /viewview classperson_number stylecolor: #333;font-size: 28rpx;80kg/view/view!-- BMI(体重/身高) --view styledisplay: flex;flex-direction: column;margin-left: 10rpx;margin-right: 10rpx;view classperson_height stylecolor: #00c6ac;font-size: 28rpx;BMI(体重/身高): /viewview classperson_number stylecolor: #333;font-size: 28rpx;24.8/view/view!-- 整体情况 --view styledisplay: flex;flex-direction: column;margin-left: 10rpx;margin-right: 20rpx;view classperson_height stylecolor: #00c6ac;font-size: 28rpx;整体情况: /viewview classperson_number stylecolor: #333;font-size: 28rpx;偏胖/view/view/view/viewview stylewidth:92%scroll-view classscbg_monitors scroll-ytrueblock wx:for{{4}} wx:keyid wx:for-itemitemName wx:for-indexidview classboxview classservices_estimate_box!-- 评估box item头 --view classservices_estimate_headimage classservices_estimate_pic src/images/de.png/image/view!-- 评估文字内容 --view classservices_estimate_connview classservices_estimate_conn_title中风针灸治疗/viewview classservices_estimate_conn_cont第一不主张吃高脂肪、高油的食物第二久坐、不运动的人群肠癌发生率高有可能的情况下尽量不开车、走路、坐公交这样运动多了疾病也就会减少了/view/view!-- 评估 查看更多 --view classservices_estimate_appointview classservices_estimate_appoint_bt查看更多/view/view/viewview wx:if{{id!3}} stylemargin-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 classswiperTtemBox catchtouchmoveonTouchMovescroll-view classscbg scroll-ytrueblock wx:for{{1}} wx:keyid wx:for-itemitemName wx:for-indexidview classhealthy_guide_box!--健康指导--view classhealthy_report_title健康指导/view!-- 检查报内容模块 --view classhealthy_suggest_content1. 确诊了原发性高血压后几乎都需要终身服药。“几个疗程根治高血压”“不会复发”的宣传都是骗人的。\n2. 比起血压高血压波动危害更大所以一定要按时按量服药不要轻易减量或停药。目前常用的降压药副作用少也轻不用担心控制好病情更要紧。3. 普通高血压人群血压要控制在140/90mmHg以下如果合并糖尿病或肾脏疾病要更严格。HTML 行间距的设置方法与问题 我们可以用:喝水这件事可不是多多益善成人的肾脏每小时只能排水800到1000毫升如果你在1小时内喝水超过1000毫升反而会导致低钠血症影响肾脏健康。所以每次喝水不要超过100毫升每小时喝水不要超过1000毫升。/view/view/block/scroll-view/swiper-item!-- 服务推荐 --swiper-item classswiperTtemBox catchtouchmoveonTouchMovescroll-view classscbg scroll-ytrueblock wx:for{{1}} wx:keyid wx:for-itemitemName wx:for-indexidview classservices_recommend_box!-- 服务推荐box item头 --view classserv_rec_headimage classservices_head_pic src/images/de.png/image/view!-- 服务推荐文字内容 --view classserv_rec_connview classserv_rec_conn_title中风针灸治疗/viewview classserv_rec_conn_cont第一不主张吃高脂肪、高油的食物第二久坐、不运动的人群肠癌发生率高有可能的情况下尽量不开车、走路、坐公交这样运动多了疾病也就会减少了/view/view!-- 服务推荐 立即预约 --view classserv_rec_appointview classappoint_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;
}/* styleborder-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(拿到当前索引并动态改变dddde.currentTarget.dataset.idx)},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {},/*** 生命周期函数--监听页面显示*/onShow() {},/*** 生命周期函数--监听页面隐藏*/onHide() {},/*** 生命周期函数--监听页面卸载*/onUnload() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {},/*** 页面上拉触底事件的处理函数*/onReachBottom() {},// 返回上一级logout(){wx.navigateBack({})},/*** 用户点击右上角分享*/onShareAppMessage() {}
})
