关闭

当前位置:首页 > 微信群新闻 » 正文

仿盒马鲜生APP

前段时间,随着马化腾现身全国多地用微信小程序乘坐公交的新闻出现,微信小程序的热度可谓是更上了一层。微信小程序现身至今,因其不用下载就可使用的方便等优点,发展趋势一直良好。
盒马鲜生的问世也是充满了热度,实现了快速配送,可谓是阿里巴巴对线下超市完全重构的新零售业态。
两个都这么方便的东西碰撞到一起,会发生什么呢?
最近正好在学习微信小程序,于是仿照着盒马鲜生APP写了一个微信小程序。
文末有GitHub源码地址,之后我也会不断更新完善这个小程序。如果你也对这个微信小程序感兴趣,欢迎交流,共同学习。

功能简介

本着便利的理念,实现了商城类APP的主要功能。

用户能够根据点击不同的商品分类,跳转页面看到各种商品的列表。

点击商品可以加入购物车,在购物车中还能实现对商品的增加或者减少数量、全选反选商品、删除购物车商品等操作。

首页中,点击左上角的按钮能够添加默认收货地址。

点击右上角的扫一扫标志,还能扫描二维码(下面的gif介绍是模拟器的效果,只能打开电脑中的图片进行扫描,真机可以打开相机进行扫描)。

首页中最顶上实现了图片轮播及自动切换,底部实现了滚动视图,能够横着滑动展示商品信息。

我们先来看看效果图,稍后再仔细介绍每一点的实现方式。

页面简介

这里主要介绍了该小程序的主要界面信息、展示了几个页面跳转及商品列表信息。请关注首页上方的图片轮播及底部的横向滚动视图。

关于购物车的操作

将商品加入购物车。

对购物车中商品的数量进行增加或者减少。

对购物车的商品进行全选或反选。

删除购物车内商品。

增加默认收货地址、二维码扫一扫

新增收货地址。

二维码扫一扫(这里是模拟机测试的,只能添加本地图片进行扫描,真机可以打开相机扫一扫)

接下来就是实现方式的介绍。

功能实现详解 首页图片轮播和底部的滚动视图

微信小程序自带组件 滑块视图容器swiper,能够实现滑块视图,每一个视图都放在一个swiper-item中。设置参数auto:play就可以自动播放导致swiper变化。

<swiper current='{{activeIndex}}' bindchange='swiperTab' autoplay="true" interval="2000" duration="1000"> // interval是自动切换时间间隔,duration是滑动动画时长 // 每一个swiper-item就是一个视图 <swiper-item> <image src=""/> </swiper-item> <swiper-item> <image src=""/> </swiper-item> <swiper-item> <image src=""/> </swiper-item> <swiper-item> <image src=""/> </swiper-item> <swiper-item> <image src=""/> </swiper-item> </swiper>

横向滚动视图的实现:
微信自带组件 可滚动视图区域scroll-view,通过设置属性名scroll-x或者scroll-y可以实现视图的横向滚动或者纵向滚动。

// 属性名scroll-x定义了该视图允许横向滚动 <scroll-view scroll-x> // 利用循环从后台获取数据,在视图中有多个view,也就是在页面中能看到的多个商品展示。 <block wx:for="{{scrollXList}}" wx:key="index" wx:for-index="index"> <view> <view> <view> <image src="http://ddrv.cn/a/495580/{{item.image}}" /> </view> <view> <view> <text>{{item.name}}</text> <text>{{item.secName}}</text> </view> <view> <text>{{item.leftTitle}}</text> <text>{{item.leftSecTitle}}</text> </view> <view> <text>{{item.rightTitle}}</text> <text>{{item.rightSecTitle}}</text> </view> <view> <a>¥{{item.price}}</a><a>/{{item.unit}}</a><a bindtap="addInCart">+</a> </view> </view> </view> </view> </block> </scroll-view> 关于购物车的操作 将商品加入购物车
上一篇:跨平台开发
下一篇:招商信诺人寿外方股东拟生变 系兄弟公司之间转
说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!

猜你喜欢


联想服务官方微信

联想服务官方微信

联想服务官方微信,提供'think'品牌及'lenovo'品牌电脑的售后咨询服务,包括服务网点导航、电脑网上报修、电脑问题...

二维码