本文给大家带来的是微信小程序绿色电商空购物车页面设计制作开发教程，制作好以后效果图如下：
一、wxml页面代码如下：
<view class="cart-box">
<view class="cart-img"><image src="http://img02.yiguo.com/e/web/150930/00981/161016/cart-none.png"></image></view>
<view class="cart-emt">购物车还是空的...</view>
<view class="cart-btn"><button catchtap="cart" type="primary" data-id="0101001" bindtap="lookdetail"> 去购物 </button></view>
</view>
|
二、wxss样式文件代码如下：
page{
height: 100%;
}
.cart-box{
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.cart-box image{
width: 200rpx;
height: 200rpx;
}
.cart-emt {
color: #008842;
}
button{
width: 300rpx;
color: #008842;
}
button[type="default"]{
color: #008842;
}
|
三、js页面代码如下：
var app = getApp();
Page({
data:{
text:"这是一个页面",
onPullDownRefresh: function () {
console.log('onPullDownRefresh')
}
},
onLoad:function(options){
// 页面初始化 options为页面跳转所带来的参数
},
lookdetail:function(e){
var lookid=e.currentTarget.dataset
wx.navigateTo({
url:"/pages/yiguo/index/index?lookid"
})
},
onReady:function(){
// 页面渲染完成
},
cart:function(){
console.log('cart')
},
onShow:function(){
// 页面显示
},
onHide:function(){
// 页面隐藏
},
onUnload:function(){
// 页面关闭
}
})
|
.jpg)
.jpg)
