模仿星巴克用心说小程序
QQ : 920037556
微信 : love920037556
主页东西不多，主要是布局问题。顶层一个轮播图(swiper)。底部是一个用wx:for循环的一个列表。结构布局用的是浮动。用nth选择一个左浮动，另一个右浮动，并设置左右间距
- 浮动css
.starbucks-list:nth-child(n){
float: left;
margin-left: 40rpx;
}
.starbucks-list:nth-child(2n){
float: right;
margin-left: 0;
margin-right: 40rpx;
}
- scroll-x及图片的切换
说到这里不得不吐槽一些小程序开发者工具
也可能是电脑的问题在电脑上开发者工具的scroll-x无效，真机上正常使用，
讲一下图片的切换：我在每一个图片上都有绑定一个id，当点击图片是做一个判断出你点击的id是否与你绑定的id相等,判断为真时，进行数据的交替。图片的边框则是做一个三元运算符判断，以及右上角的叉叉。(不得不说数据绑定是一个好东西)。
代码如下
wxml
<scroll-view scroll-x="{{scrollx}}" class="list-pic">
<view class="picture" wx:for="{{listPic}}" wx:key="{{index}}">
<image class="{{id==item.id?'check':''}}" data-id="{{item.id}}" data-url="{{item.url}}" src="{{item.url}}" bindtap="showChoose"
/>
<image wx:if="{{id==item.id}}" class="goupic" data-id="{{item.id}}" src="{{goupic}}" />
</view>
</scroll-view>
js
showChoose(e){
const id = e.currentTarget.dataset.id;
const url = e.currentTarget.dataset.url;
// console.log(e)
this.setData({
titlePic: url,
id:id
})
}
- 购物列表的制作以及购物历史
效果图
购物车选择商品和上面图片的切换其实大同小异，绑定一个值，判断你点击的是那一个商品，在把当前商品的数据改变，只需要判断一下
wx:if="{{item.num!=0 }}"
就可以实现当数量为0时，减号与数量同时消失。
是不是很简单呢？结构代码如下：
<view class="starbucks-list" wx:for="{{starbucksList}}" wx:key="{{index}}">
<image bindtap="checkDrink" data-imgnum="{{item.imgnum}}" class="drinkImg" src="{{item.url}}" />
<text class="description">{{item.name}}</text>
<text class="price">￥{{item.price}}</text>
<view class="addNum" bindtap="addNumber" data-index="{{index}}" data-status="{{item.status}}">
<image wx:if="{{item.num!=0}}" src="{{delNum1}}" />
<image wx:else="" src="{{addNum}}" />
</view>
<view wx:if="{{item.num!=0 }}" data-index="{{index}}" class="delNum {{item.num==0?'out':''}}" bindtap="delNumber"
data-status="{{item.status}}">
<image src="{{delNum}}" />
</view>
<text wx:if="{{item.num!=0 }}" class="listNum {{item.num==0?'out':''}}">{{starbucksList[index].num}}</text>
<view wx:if="{{item.num!=0 }}" class="xiabiao {{item.num==0?'out':''}}"></view>
</view>
但是其中也有一个难点困恼了我很久很久，就是关于Storage，因为购买成功之后需要把购买历史保存在本地，刚开始我的想法是把点击每个加号时，把点击的商品的下标作为一个key，然后把一些信息存储进去。这样每个key都是动态的，我们只要在下一个页面找到这个key,就可以获取到数据。但是，由于页面的跳转，我想了很多种办法都没法在历史界面找到之前点击商品的下标。于是放弃了(有解决方法的小伙伴可以私聊我)。
此路不通还得另辟蹊径，于是我想到了用数组来解决，用一个数组每个商品都默认占一个位置。以下标为记号，根据每点击商品的下标从而push进数组中。然后bug就来了，当你有没选的商品时，数组帮你占的位置默认undefined,但是你在历史中用wx:for循环该数组时undefined也会占一个格子，导致你的wxml会出问题。解决方案是用数组的split()方法 把为空的消去。
onLoad: function (options) {
const historyList = this.data.historyList
var that = this
wx.getStorage({
//获取数据的key
key: "key",
success: function (res) {
// console.log(res)
for (let i = 0; i < res.data.length; i++) {
historyList[i] = res.data[i]
}
for (let i = 0; i < historyList.length; i++) {
if (historyList[i] == null) {
historyList.splice(i, 1);
i = i - 1; // i - 1 ,因为空元素在数组下标 2 位置，删除空之后，后面的元素要向前补位，
// 这样才能真正去掉空元素,觉得这句可以删掉的连续为空试试，然后思考其中逻辑
// console.log(historyList);
}
}
that.setData({
historyList,
hasHistory:true,
})
}
})
- 商品详情界面
- 门店详情以及地图组件
门店列表是使用了腾讯地图api
地图api是一个蛮实用的组件，这里用到了关键字搜索(search)接口，直接查询了附近星巴克的门店，里面还可以选择长地址和短地址，基本上你要的数据都有，还是比较方便的。必须安利一波。
qqmapsdk.search({
keyword: '星巴克',
address_format: 'short',
page_size: 20,
success: (res) => {
},
fail: function (res) {
},
complete: function (res) {
}
关于地图上弹出层，本以为简简单单的用一个wx:if在加上一个fixed就可以解决的，在开发工具中显示的好好的，一用真机测试就傻眼了，我的弹出层呢？仔细去查看文档才发现地图的层级是最高的，不能有东西覆盖。在查看文档后发现了cover-view。可以凌驾于地图之上的盒子
弹出层动画是一个animation组件然后自己弄的的一个动画效果
checkImg(e) {
var that = this;
// 创建一个动画实例
var animation = wx.createAnimation({
// 动画持续时间
duration: 500,
// 定义动画效果，当前是匀速
timingFunction: 'linear'
})
// 将该变量赋值给当前动画
that.animation = animation
// 先在y轴偏移，然后用step()完成一个动画
animation.translateY(400).step()
// 用setData改变当前动画
that.setData({
// 通过export()方法导出数据
animationData: animation.export(),
// 改变view里面的Wx：if
hascheck: true
})
// 设置setTimeout来改变y轴偏移量，实现有感觉的滑动
setTimeout(function () {
animation.translateY(0).step()
that.setData({
animationData: animation.export()
})
}, 100)
},
这个小程序还有蛮多功能并没有实现，也有一些bug还没有解决，比如两地的规划线路polyline不应该为一条笔直的直线，还有街景等等一些功能需要去完善，细节才能决定成败，还是得不断去完善一些细节，才能做出好的作品，这个小程序我还会去不断的完善它，喜欢的话可以关注我，我们可以一起交流学习，也希望可以给我提出一些宝贵的意见