本文给大家带来的是微信小程序宏华净水开关式图标导航首页设计制作开发教程，制作好以后效果图如下：
一、wxml页面代码如下：
<!--index.wxml-->
<view class="topBg">
<view class='loginbtn' bindtap='gologin'>员工登录</view>
<div class="flex align infoBox">
<div class="item">
<div class="title">制水剩余天数</div>
<div class="day flex between">
<div class="item textLeft">297<small>天</small></div>
<div class="item textRight">
<div class="statue">
<image style="" mode="widthFix" src="../../image/icon_home_top_no-water-@3x.png"></image><div>缺水</div>
</div>
<div class="statue">
<image style="" mode="widthFix" src="../../image/icon_home_top_water-full@3x.png"></image><div>水满</div>
</div>
</div>
</div><!--day-->
</div>
</div><!--infoBox-->
<image style="" mode="scaleToFill" src="../../image/pho_home_top@3x.png"></image>
</view><!--topBg-->
<view class="contrller">
<view class="contrllerBg">
<view hover-class="hoverclass" class="ctrlBtn btn1" bindtap="showModal" data-title="机器将自动冲洗，是否操作？">
<image style="" mode="widthFix" src="../../image/icon_home_center_rinse@3x.png"></image>
</view>
<view hover-class="hoverclass" class="ctrlBtn btn2" bindtap="gorepair">
<image style="" mode="widthFix" src="../../image/icon_home_center_service@3x.png"></image>
</view>
<view hover-class="hoverclass" class="ctrlBtn btn3" bindtap="gostatue">
<image style="" mode="widthFix" src="../../image/icon_home_center_core@3x.png"></image>
</view>
<view hover-class="hoverclass" class="ctrlBtn btn4" bindtap="showModal" data-title="机器将自动制水，是否操作？">
<image style="" mode="widthFix" src="../../image/icon_home_center_water@3x.png"></image>
</view>
<view hover-class="hoverclass" class="ctrlBtn btn5" bindtap="showModal" data-title="机器将关闭，是否操作？">
<image style="" mode="widthFix" src="../../image/icon_home_top_switch@3x.png"></image>
</view>
<image style="" mode="widthFix" src="../../image/pho_home_center@3x.jpg"></image>
</view><!--contrllerBg-->
</view><!--contrller-->
|
二、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{
width: 100%;
padding: 0 20px;
}
.topBg .infoBox .day{
color: white;
font-size: 35px;
font-weight: bold;
margin-top: 10px;
}
.topBg .infoBox .day small{
font-weight: normal;
font-size:10px;
margin-left: 10px;
}
.topBg .statue{
display: inline-block;
text-align: center;
font-size: 12px;
font-weight: normal;
padding: 0 10px;
}
.topBg .statue image{
width: 15px;
height: 15px;
display: inline-block;
}
.contrller .contrllerBg{
text-align: center;
position: relative;
padding: 20px 0;
}
.contrller .contrllerBg image{
display: block;
width: 100%;
}
.contrller .contrllerBg .ctrlBtn{
position: absolute;
z-index: 11;
width:80px;
height:80px;
}
.contrller .contrllerBg .btn1{
left: 50%;
margin-left: -40px;
top: 40px;
}
.contrller .contrllerBg .btn2{
right:30px;
top: 50%;
margin-top: -40px;
}
.contrller .contrllerBg .btn3{
left: 50%;
margin-left: -40px;
bottom: 40px;
}
.contrller .contrllerBg .btn4{
left:30px;
top: 50%;
margin-top: -40px;
}
.contrller .contrllerBg .btn5{
width: 80px;
height: 80px;
top: 50%;
margin-top: -40px;
left: 50%;
margin-left: -40px;
}
.loginbtn{
position: absolute;
right: 0;
top: 10px;
background: rgba(0,0,0,0.3);
padding: 5px 10px;
color:white;
border-top-left-radius: 50px;
border-bottom-left-radius: 50px;
font-size: 11px;
z-index: 11;
}
.hoverclass{
transform: scale(1.1);
transition: all 0.3s;
}
|
三、js页面代码如下：
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse('button.open-type.getUserInfo')
},
//事件处理函数
gostatue: function() {
wx.navigateTo({
url: '../statue/statue'
})
},
gorepair:function(){
wx.navigateTo({
url: '../repair/repair'
})
},
gologin:function(){
wx.navigateTo({
url: '../login/login',
})
},
onLoad: function () {
wx.getUserInfo({
withCredentials:true,
success: function(res) {
var userInfo = res.userInfo
var nickName = userInfo.nickName
var avatarUrl = userInfo.avatarUrl
var gender = userInfo.gender //性别 0：未知、1：男、2：女
var province = userInfo.province
var city = userInfo.city
var country = userInfo.country
console.log(res)
}
})
},
showModal:function(event){
console.log(event)
wx.showModal({
title: '操作提醒',
content: event.currentTarget.dataset.title,
success: function(res) {
if (res.confirm) {
console.log('用户点击确定')
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
}//showModal
})
|
.jpg)
.jpg)
