E企盈营销工具技术服务商 热线:4006-838-530

微信小程序实现星巴克用星说效果

E企盈直播平台营销卖货系统

最近微信小程序应用比较多,前段时间看到了星巴克的星巴克用星说小程序,闲暇时间就把该小程序的效果实现了一下,在此仅作功能介绍,实际效果可以微信小程序搜索:星巴克用星说,查看官方效果。先展示一下最终界面效果:界面分析通过上面的效果图,本示例包含两个界面,第一个界面产品列表界面,包含头部Banner,中间的产品列表和底部的Bottom,第二个界面产品详情界面,包含顶部大图、横向滑动列表、商品列表和商品详情弹窗,接下来分别实现相应的界面:首界面实现1.布局文件首先我们要编写首界面的布局文件grid.wxml:swiper indicator-dots=”{{indicatorDots}}”  autoplay=”{{autoplay}}” interval=”{{interval}}” duration=”{{duration}}” indicator-color=’#dbdbdb’ indicator-active-color=’#00ae61′  block wx:for=”{{imgUrls}}”    swiper-item      image src=”{{item.toppic}}” class=”slide-image” bindtap=’toBannerInfo’ data-index='{{index}}’ width=”355″ height=”150″/    /swiper-item  /block/swiperview class=”pro-body”  text class=’pro-title’咖啡+祝福 即刻表心意/text  view class=’items-list’    block class=’pro-item’ wx:for=”{{proList}}”      view class=’pro-bodydiv’ bindtap=’toProListInfo’ data-index='{{index}}’        image class=’pro-img’ src='{{item.toppic}}’/          view class=’pro-name'{{item.name}}/view       /view    /block  /view  view class=’pro-bottom’    view      view bindtap=’toProHistory’        image class=’pro-pay’ src=’/images/img_pay.jpg’/      /view      text class=’pro-history’购买历史/text    /view  /view/view在该布局文件中,使用微信小程序swiper控件实现首页顶部轮播图,通过该控件的相关属性,设置轮播图自动播放,显示时间,角标颜色等属性信息。2.布局属性编辑grid.wxss文件,用于设置grid.wxml中相关控件的属性信息。swiper {  width: 100%;  height: 420rpx;}swiper image {  width: 100%;  height: 100%;  display: block;}.pro-body {  width: 100%;  height: 100%;  padding: 0;  margin: 0;  padding-top: 60rpx;  background: #f9f9f9;}.pro-title {  font-size: 30rpx;  color: #333333;  margin-left: 40rpx;}.items-list {  width: 100%;  display: flex;  flex-flow: row wrap;  align-content: flex-start;  overflow: hidden;  padding-left: 2%;  padding-right: 2%;}.pro-item {  width: 100%;  height: 100%;  padding: 0;  margin: 0;}.pro-bodydiv {  flex:0 0 44%;  height: 280rpx;  margin-top: 5%;  margin-left: 2%;  margin-right: 2%;  border-radius: 20rpx;  background: white;  text-align: center;}.pro-img {  left: 0px;  top: 0px;  width: 98%;  height: 220rpx;  margin-top: 3rpx;   border-radius: 20rpx}.pro-name {  font-size: 23rpx;  color: #666666;  position: relative;  width: 100%;  top: 5rpx;  align-content: center;  text-align: center;}.pro-bottom {  width: 100%;  height: 100%;  margin-top: 80rpx;  margin-bottom: 150rpx;  text-align: center;}.pro-pay {  width: 130rpx;  height: 130rpx;  margin-bottom: 10rpx;}.pro-history {  font-size: 33rpx;  color: #0ca862;  text-decoration: underline; }其中,为实现Grid布局需设置items-list属性值display: flex;flex-flow: row wrap;  align-content: flex-start;3.JS文件编辑grid.js用于控件的数据处理:// pages/grid/grid.jsPage({  /**   * 页面的初始数据   */  data: {    imgUrls: [      {        “toppic”: “/images/img_bann1.jpg”,        “name”: “玩出我的夏天”      }, {        “toppic”: “/images/img_bann2.jpg”,        “name”: “你真棒”      }, {        “toppic”: “/images/img_bann3.jpg”,        “name”: “毕业季”      }, {        “toppic”: “/images/img_bann4.jpg”,        “name”: “干杯”      }, {        “toppic”: “/images/img_bann5.jpg”,        “name”: “求抱抱”      }, {        “toppic”: “/images/img_bann6.jpg”,        “name”: “宝贝谢谢你”      }    ],    indicatorDots: true,    autoplay: true,    interval: 5000,    duration: 1000,    proList:[      {        “toppic”: “/images/img_bann1.jpg”,        “name”: “玩出我的夏天”      }, {        “toppic”: “/images/img_bann2.jpg”,        “name”: “你真棒”      }, {        “toppic”: “/images/img_bann3.jpg”,        “name”: “毕业季”      }, {        “toppic”: “/images/img_bann4.jpg”,        “name”: “干杯”      }, {        “toppic”: “/images/img_bann5.jpg”,        “name”: “求抱抱”      }, {        “toppic”: “/images/img_bann6.jpg”,        “name”: “宝贝谢谢你”      }, {        “toppic”: “/images/img_bann7.jpg”,        “name”: “有你真好”      }, {        “toppic”: “/images/img_bann8.jpg”,        “name”: “宝贝 生快”      }, {        “toppic”: “/images/img_bann9.jpg”,        “name”: “为你点赞”      }, {        “toppic”: “/images/img_bann10.jpg”,        “name”: “休息一夏”      }    ]  },  /**   * 生命周期函数–监听页面加载   */  onLoad: function (options) {    this.getImgUrls();  },  getImgUrls: function () {    var self = this;    wx.request({      url: ‘你的服务器地址…’,      method: “GET”,      success(res) {        console.log(res)        self.setData({          // imgUrls: res.data.bannerList,          // proList: res.data.centerList,          // bottomItem: res.data.bottom        })      }    })  },  toBannerInfo: function (e) {    var index = e.currentTarget.dataset.index;    var imgUrls = this.data.imgUrls;    var name = imgUrls[index].name;    var toppic = imgUrls[index].toppic;    // wx.showToast({    //   title: name + ”,    // })    wx.navigateTo({      url: ‘/pages/gridinfo/gridinfo?name=’ + name + ‘&toppic=’ + toppic,    })  },  toProListInfo: function (e) {    var index = e.currentTarget.dataset.index;    var proList = this.data.proList;    var name = proList[index].name;    var toppic = proList[index].toppic;    // wx.showToast({    //   title: name + ”,    // })    wx.navigateTo({      url: ‘/pages/gridinfo/gridinfo?name=’ + name + ‘&toppic=’ + toppic,    })  },  toProHistory: function (e) {    wx.showToast({      title: ‘购买历史’,    })  },  /**   * 生命周期函数–监听页面初次渲染完成   */  onReady: function () {  },  /**   * 生命周期函数–监听页面显示   */  onShow: function () {  },  /**   * 生命周期函数–监听页面隐藏   */  onHide: function () {  },  /**   * 生命周期函数–监听页面卸载   */  onUnload: function () {  },  /**   * 页面相关事件处理函数–监听用户下拉动作   */  onPullDownRefresh: function () {  },  /**   * 页面上拉触底事件的处理函数   */  onReachBottom: function () {  },  /**   * 用户点击右上角分享   */  onShareAppMessage: function () {  }})由于没有服务器相关数据,本示例使用了本地数据来实现,如果有网络数据可直接修改wx.request()方法中的url地址即可,其中indicatorDots: true,autoplay: true,interval: 5000,duration: 1000,为顶部轮播图的相关属性信息,wx.navigateTo({  url: ‘/pages/gridinfo/gridinfo?name=’ + name + ‘&toppic=’ + toppic,})为界面跳转,同时向gridinfo界面传递name和toppic参数。 至此,第一个界面首界面基本实现。详情界面实现1.布局文件在Page目录下创建一个新的目录,命名为gridinfo,在该目录下创建一个Page,命名为gridinfo,编辑gridinfo.wxml布局文件,该布局标题为上个界面的商品名称,该布局文件包含一个顶部图片布局,横向图片列表布局,纵向的商品列表布局,悬浮的底部布局和商品详情的弹窗布局,布局文件如下:!–pages/gridinfo/gridinfo.wxml–view class=’pro-top’  image src='{{toppic}}’//viewview class=’pro-mid’scroll-view class=’pro-scroll’ scroll-x=’true’ style=”white-space: nowrap; display: flex”  block class=’pro-lists’ wx:for=”{{proList}}”    view class=’pro-item’ style=’display: inline-block’ bindtap=’toProListInfo’ data-index='{{index}}’      image class=”{{item.showView?’pro-itempic_show’:’pro-itempic_hide’}}” src='{{item.pic}}’/      icon class=”{{item.showView?’pro-selectpic_show’:’pro-selectpic_hide’}}” type=’success’ size=’20’ color=’#03a964’/     /view  /block/scroll-view/viewview class=’pro-selecttitle’text选择商品/text/viewview class=’pro-productlists’  view class=’pro-productitem’ wx:for=”{{productList}}”    image class=’pro-productpic’ bindtap=’toProductInfo’ data-index='{{index}}’ src='{{item.pic}}’/    text class=’pro-productname’ bindtap=’toProductInfo’ data-index='{{index}}'{{item.name}}/text    text class=’pro-productprice’ bindtap=’toProductInfo’ data-index='{{index}}’¥{{item.price}}/text    AD:【E企盈小程序开发公司】E企盈系统专业开发:直播系统,直播平台系统源码,小程序,商城版小程序,分销小程序,小程序定制,微分销,微商,微信分销,微信分销商城,微信分销系统,微信分销管理,微信分销平台,微商代理系统,E企盈是专业的直播小,E企盈是专业的直播小程序,公众号分销系统,营销系统,社群私域流量卖货系统技术开发商,热线:4006-838-530

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序实现星巴克用星说效果
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏