本文给大家带来的是微信小程序肯德基顶部幻灯开始点餐首页设计制作开发教程,制作好以后效果图如下:
一、wxml页面代码如下:
<view class="container">
<view class="swiper">
<swiper class="swiper_box" bindchange="swiperchange" vertical="{{vertical}}" autoplay="{{autoplay}}" interval="{{interval}}"
duration="{{duration}}" indicator-dots="{{indicatorDots}}" circular="{{circular}}">
<block wx:for-items="{{images}}">
<swiper-item>
<image src="{{item}}" class="slide-image"></image>
</swiper-item>
</block>
</swiper>
</view>
<button class="weui-btn order__btn" type="primary" bindtap="toSelectKFC">开始点餐</button>
<view class="weui-cells weui-cells_after-title">
<view class="weui-cell card" bindtap="toCard">
<view class="weui-cell__hd">
<image src="{{cardIcon}}" style="margin-right: 5px;vertical-align: middle;width:40px; height: 40px;"></image>
</view>
<view class="weui-cell__bd">我的卡包</view>
<view class="weui-cell__ft">更多优惠卷</view>
</view>
</view>
<view class="weui-cells__title cart-title">
<view class="h3">蛋挞买一送一</view>
<view>有效期: 2017年04月27日-2017年5月03日</view>
</view>
<view class="weui-cells weui-cells_after-title">
<view class="weui-cell cart" bindtap="toList">
<view class="weui-cell__hd">
<image src="{{cartIcon}}" style="margin-right: 5px;vertical-align: middle;width:40px; height: 40px;"></image>
</view>
<view class="weui-cell__bd">我的订单</view>
<view class="weui-cell__ft">查看订单</view>
</view>
</view>
</view>
|
二、wxss样式文件代码如下:
.container {
background-color: #f2f2f2;
width: 375px;
height: 574px;
}
.swiper {
width: 100%;
height: 318px;
}
.swiper_box {
width: 375px;
height: 300px;
}
swiper-item {
width: 375px;
height: 300px;
display: inline-block;
overflow: hidden;
}
swiper-item image {
height: 300px;
width: 375px;
}
button[type="primary"] {
color: #FFFFFF;
background-color: #ba3337;
}
.order__btn {
width: 90%;
}
button[type="primary"]:hover {
background-color: #ba3337;
}
.weui-cells {
background-color: #f2f2f2;
}
.weui-cells::before {
display: none;
}
.card {
padding: 20px 60px 20px 40px ;
}
.cart {
padding: 10px 60px 10px 40px ;
}
.weui-cell__hd {
margin-right: 10px;
}
.cart,.card .weui-cell__bd,.card .weui-cell__ft{
font-size: 12px;
}
.weui-cell__bd {
font-weight: 500;
}
.weui-cell__ft::before {
position: absolute;
top: 34px;
left: 332px;
content:" ";
height: 8px;
width: 8px;
border-top: 1px solid #999999;
border-right: 1px solid #999999;
transform: rotateZ(45deg)
}
.weui-cell__ft::after {
position: absolute;
top: 34px;
left: 340px;
content:" ";
height: 8px;
width: 8px;
border-top: 1px solid #999999;
border-right: 1px solid #999999;
transform: rotateZ(45deg)
}
.cart .weui-cell__ft::before {
top: 24px;
left: 332px;
}
.cart .weui-cell__ft::after {
top: 24px;
left: 340px;
}
.weui-cells__title {
border-bottom: 1px solid #D9D9D9;
padding-left: 40px;
}
.cart-title view {
font-size: 8px;
line-height: 12px;
margin-bottom: 10px;
}
.cart-title .h3 {
font-size: 12px;
color: #000;
line-height: 12px;
}
|
三、js页面代码如下:
let app = getApp()
Page({
data: {
// swipe的小点 默认true
indicatorDots: true,
// 滚动模式
vertical: false,
// 自动播放吗
autoplay: true,
circular: true,
interval: 3000,
duration: 500,
items: [],
images: ['http://www.kfc.com.cn/kfccda/UploadPic/HomePage/201704/20170424014514_10.jpg',
'http://www.kfc.com.cn/kfccda/UploadPic/HomePage/201704/20170424014651_46.jpg',
'http://www.kfc.com.cn/kfccda/UploadPic/HomePage/201703/20170320121212_90.jpg',
'http://www.kfc.com.cn/kfccda/UploadPic/HomePage/201704/20170424014405_11.jpg'],
cardIcon: '../../image/cardbag.png',
cartIcon: '../../image/cart.png'
},
// 页面加载完成之后,发送请求数据的好时机,它的大名叫!!!
// 钩子 钩子 钩子 钩子 钩子
onLoad: function() {
console.log('加载完成')
},
toCard: function(e) {
console.log(1)
wx.navigateTo({
url: '/pages/card/card'
})
},
toList: function(e) {
console.log(e)
wx.navigateTo({
url: '/pages/order/order'
})
},
toSelectKFC: function (e) {
wx.navigateTo({
url: '/pages/halladdress/halladdress'
})
}
})
|