本文给大家带来的是微信小程序绿色按钮风格转运指南设计制作开发教程，制作好以后效果图如下：
一、wxml页面代码如下：
<!--show.wxml-->
<view class="" style="padding:20px;">
<button type="primary" bindtap="mytap" id="index" >1.2首页</button>
<button type="primary" bindtap="mytap" id="guide" >1.3新手指南</button>
<button type="primary" bindtap="mytap" id="guideGif" >1.4新手指南gif</button>
<button type="primary" bindtap="mytap" id="announcement">1.5系统公告</button>
<button type="primary" bindtap="mytap" id="announceDetail" >1.5系统公告详情</button>
<button type="primary" bindtap="mytap" id="chooseCountry" >1.6选择国家</button>
<button type="primary" bindtap="mytap" id="expense" >1.6运费查询</button>
<button type="primary" bindtap="mytap" id="waybill">1.7运单查询</button>
<button type="primary" bindtap="mytap" id="volumeStart" >1.8体积计算</button>
<button type="primary" bindtap="mytap" id="volumeCalc" >2.8体积计算详情</button>
<button type="primary" bindtap="mytap" id="chooseGood" >1.9选择物品</button>
<button type="primary" bindtap="mytap" id="mailLimit" >1.9邮寄限制</button>
</view>
|
二、wxss样式文件代码如下：
/* show.wxss */
button{
margin-top: 3px;
width:100%;
}
.piaochecked {
width: 20px;
height: 20px;
float: left;
cursor: pointer;
border: 1px solid red;
margin-left: 10px;
text-align: center;
background-image: url("http://www.haorooms.com/uploads/images/checkbox_01.gif");
background-repeat: no-repeat;
background-position: 0 0;
}
.on_check {
background-position: 0 -21px;
}
.radioclass {
opacity: 0;
cursor: pointer;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
}
|
三、js页面代码如下：
// show.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
hubing:function(){
console.log('jump');
wx.navigateTo({
url: '../../pages/index/index',
})
},
mytap: function (e) {
var url=e.currentTarget.id
console.log(url)
wx.navigateTo({
url: '../'+url+"/"+url,
complete:function(){
console.log('success')
}
})
}
})
|
.jpg)
.jpg)
