微信小程序宏华净水蓝色页面滤芯展示设计制作开发教程

本文给大家带来的是微信小程序宏华净水蓝色页面滤芯展示设计制作开发教程，制作好以后效果图如下：

一、wxml页面代码如下：

<view class="bg-gray">
	<view class="topBg">
		<div class="flex align between infoBox">
			<div class="item item1">
				<div class="day">鱼鹰8号 金色版(SY-DSF4)</div><!--day-->
			</div>
			<div class="item imgbox">
				 <image style="" mode="widthFix" src="../../image/lx_icon_wx_default@3x.png" bindtap="gorepair"></image>
			</div>
		</div><!--infoBox-->
	  <image style="" mode="scaleToFill" src="../../image/pho_home_top@3x.png"></image>
	</view><!--topBg-->
	
	<div class="space20"></div>
	
	<view class="setBox">
		
		<view class="flex align between">
			
			<view class="item">
				<b>25%</b>
				<div class="speedBg">
					<div class="speed" style="height: 50%;"></div>
				</div>
				<span>PP棉</span>
			</view>
			
			<view class="item">
				<b>25%</b>
				<div class="speedBg">
					<div class="speed" style="height: 50%;"></div>
				</div>
				<span>PP棉</span>
			</view>
			
			<view class="item">
				<b>25%</b>
				<div class="speedBg">
					<div class="speed" style="height: 50%;"></div>
				</div>
				<span>PP棉</span>
			</view>
			
			<view class="item">
				<b>25%</b>
				<div class="speedBg">
					<div class="speed" style="height: 50%;"></div>
				</div>
				<span>PP棉</span>
			</view>
			
			<view class="item">
				<b>25%</b>
				<div class="speedBg">
					<div class="speed" style="height: 50%;"></div>
				</div>
				<span>PP棉</span>
			</view>
			
		</view><!--flex-->
		
	</view><!--setBox-->
	
	
</view><!--bg-gray-->

二、wxss样式文件代码如下：

/**index.wxss**/
.topBg image{
	display: block;
	width: 100%;
	height:160px;
}
.topBg{
	position: relative;
}
.topBg .infoBox{
	position: absolute;
	width: 100%;
	height: 100%;
}
.topBg .infoBox .title{
	color: white;
	font-size: 12px;
	opacity: 0.7;
}
.topBg .infoBox>.item{
	padding: 0 20px;
	text-align: center;
}
.topBg .infoBox>.item1{
	flex:1;
}
.topBg .infoBox .title .borderB{
	width: 100px;
	margin: 0 auto;
	text-align: left;
	position: relative;
}
.topBg .infoBox .title .borderB:after{
	content: '';
	position: absolute;
	left: 0;
	bottom:-5px;
	width:30px;
	height: 1px;
	background: white;
}
.topBg .infoBox .day{
	color: white;
	font-size: 15px;
	margin-top: 10px;
	text-align: left;
}
.topBg .infoBox .imgbox{
	text-align: right;
}
.topBg .infoBox .imgbox image{
	width: 40px;
}
.setBox{
	background: white;
	padding:40px 20px;
	margin: 0 10px;
	border-radius: 8px;
	box-shadow: 0px 5px 5px #e4f3ff;
}
.setBox .item{
	text-align: center;
}
.setBox .speedBg{
	height: 250px;
	width: 40px;
	margin: 10px auto;
	border-radius: 100px;
	background: #e9f1f7;
	position: relative;
}
.setBox .speedBg .speed{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	background: -webkit-gradient(linear, 0 0, 0 bottom, from(#79d4fe), to(#379aef));  
	border-radius: 100px;
}
.setBox .item b{
	color: #3b98e7;
	font-weight: bold;
}

.setBox .item span{
	color: #424242;
}

三、js页面代码如下：

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
  	
	},
	gorepair:function(){
  	wx.navigateTo({
      url: '../repair/repair'
    })
  }
})

模板简介：该模板名称为【微信小程序宏华净水蓝色页面滤芯展示设计制作开发教程】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。