首页 > 小程序教程 > 微信小程序肯德基顶部幻灯开始点餐首页设计制作开发教程

微信小程序肯德基顶部幻灯开始点餐首页设计制作开发教程

上一篇 下一篇
本文给大家带来的是微信小程序肯德基顶部幻灯开始点餐首页设计制作开发教程,制作好以后效果图如下:
一、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'
    })
  }
})

模板简介:该模板名称为【微信小程序肯德基顶部幻灯开始点餐首页设计制作开发教程】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。

相关搜索
  • 下载密码 lanrenmb
  • 下载次数 20,191次
  • 使用软件
  • 文件格式
  • 文件大小
  • 上传时间 08-02
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
企业网站 微信模板 微信公众平台 html5 微信图片 微信文章 自适应 单页式简历模板 微信素材 响应式
您可能会喜欢的其他模板