本文给大家带来的是微信小程序宏华净水故障维修页面设计制作开发教程,制作好以后效果图如下:
一、wxml页面代码如下:
<view class="bg-gray">
<view class="productList flex align">
<view class="imgbox item"><image style="" mode="widthFix" src="../../image/ydjl_img@3x.png"></image></view>
<view class="text item">
<view class="title">鱼鹰8号金色版</view>
<view>品牌:盛源阳光</view>
<view>型号SY-98</view>
</view>
</view><!--productList-->
<div class="space10"></div>
<view class="defaultList">
<view class="list flex align rightNav" bindtap='gorepairrecode'>
<view class="icon item"><image style="" mode="widthFix" src="../../image/gzwx_icon_wxjl_default@3x.png"></image></view>
<view class="text item">维修记录</view>
</view>
</view><!--defaultList-->
<div class="space10"></div>
<view class="defaultList">
<view class="list flex align inputItem">
<view class="icon item"><image style="" mode="widthFix" src="../../image/gzwx_icon_xh_default@3x.png"></image></view>
<view class="text item">请选择部件</view>
<view class="inputBox item">
<picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
<view class="picker">{{array[index]}}</view>
</picker>
</view>
</view>
<view class="list flex align inputItem">
<view class="icon item"><image style="" mode="widthFix" src="../../image/gzwx_icon_wxjl_default@3x.png"></image></view>
<view class="text item"> <textarea auto-height placeholder="请描述您的问题" /></view>
</view>
</view><!--defaultList-->
</view><!--bg-gray-->
|
二、js页面代码如下:
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
array: ['请选择部件', '部件1', '部件2', '部件3'],
index: 0
},
bindPickerChange:function(e){
this.setData({
index: e.detail.value
})
},
gorepairrecode:function(){
wx.navigateTo({
url: '../repair_record/repair_record',
})
}
})
|