【食疗坊小程序开发】学习笔记8---cart页面制作

这篇文章主要是对Cart页面进行分析
在制作中涉及到css动画属性、flex布局等
在优化涉及到icon的使用、touchstart-touchmove触摸移动等多个触发事件

---

页面制作

1.基础布局

  <view wx:for="{{list}}" wx:key="index" 
      class="list {{isTouchMove?'touch-move':''}}" 
      bindtap="demo">
  <view class="content">
    <view class="circle">
      <icon wx:if="{{selected}}" type="success" size="23"></icon>
      <icon wx:else type="circle" size="23"></icon>
    </view>
    <view class="img">
      <image src="{{item.pic}}"></image>
    </view>
    <view class="wrapper">
      <view class="th">{{item.name}}</view>
      <view class="desc">{{item.info}}</view>
      <view class="info">
        <view class="price">￥{{item.price}}</view>
        <view class="update">
          <view class="reduce">-</view>
          <view class="num">{{item.num}}</view>
          <view class="add">+</view>
        </view>
      </view>
    </view>
  </view>
  </view>
  <!-- 底部结算栏 -->
  <view class="height"></view>
  <view class="bottom">
    <view class="checkboxAll">
      <view class="icon">
        <icon wx:if="{{selectAll}}" type="success" size="23"></icon>
        <icon wx:else type="circle" size="23"></icon>
      </view>
      <view class="text">全选</view>
    </view>
    <view class="heji">合计<text>0/00</text></view>
    <view class="jiesuan {{isShow?'active':''}}">结算(0.00)</view>
  </view>

2.样式设置

/* pages/shop/shop.wxss */
page{
  background: #f5f5f5;
}
.list{
  display: flex;
  background-color: #fff;
  justify-content: space-between;
}
.content{
  flex: 1;
  width: 100%;
  display: flex;
  padding: 20rpx;
  background: #fff;
  margin-left: -90px;
  transform: translateX(90px);
  transition: all 0.4s;
}
.remove{
  width: 90px;
  background: red;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200rpx;
  transform: translateX(90px);
  transition: all 0.4s;
}
.touch-move.content,.touch-move.remove{
  transform: translateX(0px);
}

.img image{
  width: 184rpx;
  height: 184rpx;
  padding-left: 20rpx;
  padding-right: 20rpx;
}
.wrapper{
  height: 184rpx;
  position: relative;
}
.desc{
  color: #666;
  font-size: 28rpx;
  margin-top: 10rpx;
}
.info{
  position: absolute;
  bottom: 0;
  left: 0;
  font-size: 26rpx;
  display: flex;
}
.info .price{
  color: red;
}
.update{
  display: flex;
  padding-left: 20rpx;
  text-align: center;
}
.update .reduce{
  width: 40rpx;
  height: 40rpx;
  border: 1rpx solid #999;
  font-size: 30rpx;
}
.update .num{
  padding-left: 20rpx;
  padding-right: 20rpx;
}
.update .add{
  width: 40rpx;
  height: 40rpx;
  color: #fff;
  background: #333;
  border: 1rpx solid #999;
}
.height{
  height: 160rpx;
}
.bottom{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  background: #fff;
}
.checkboxAll{
  flex:1;
  display: flex;
  align-items: center;
  padding-left: 20rpx;
}
.text{
  padding-left: 5rpx;
  padding-bottom:10rpx;
}
.heji{
  padding:20rpx;
}
.jiesuan{
  padding:20rpx;
  background: #999;
  color: #fff;
}

transition 过渡效果

transition 属性可以实现元素在不同状态之间的平滑过渡效果，常用于鼠标悬浮、点击等事件触发的效果。

transform: translateX(90px);
transition: all 0.4s;

这里我们希望移动时，有一个缓慢向右的效果
这里找了个例子：

/* 例1：背景颜色的平滑过渡 */
div {
  background-color: red;
  transition: background-color 1s;
}
 
div:hover {
  background-color: blue;
}

当鼠标悬浮在 div 元素上时，背景颜色会从红色平滑过渡到蓝色，过渡时间为 1 秒。

3.数据调用

Page({
  data: {
      list:[],
      starx:0,
     isTouchMove:false,
     selected:false
  },
  getshopData:function(){
    wx.request({
      url: 'http://iwenwiki.com:3002/api/cart/list',
      success:res=>{
        if(res.data.status==200){
          this.setData({
            list:res.data.data.result
          })
          
        }else{
          console.log("获取数据失败")
        }
      }
    })
  },
  touchstart:function(e){
      this.setData({
        starx:e.changedTouches[0].clientX
      })
  },
  touchmove:function(e){
    var list=this.data.list;
    var index=e.currentTarget.dataset.index;
    var endx=e.changedTouches[0].clientX;
    if(endx>starx){
      list[index].isTouchMove=true
    }else{
      list[index].isTouchMove=false
    }
    this.setData({
      list:list
    })
  },
  onLoad(options) {
    this.getshopData()
  },

---

【踩一坑】

大家在做getshopData方法时，一定要setData({ })返回对应的有效数据，不然后果就是数据调用不成功，一片白。

---

总结

以上就是这篇cart页面的基本框架了
一些滑动、点击、等事件，我还没整明白，待我反复观看，琢磨完后再用通俗语言写出来和大家分享
明天会详写滑动的内容
不多说 我琢磨去了

---

这篇本该在昨天更出来，为啥没更，听我狡辩：
一早做完了文章大致内容的纸质草稿，中午就能开始输出到csdn了，偏偏这个时候，我约了老师帮我看看设计作品，我就开始去做设计了，是的没错，从中午十二点做到晚上十点，我才做完第一稿的设计。
等我非常满意的把方案发给甲方之后，才意识到今天csdn的小程序笔记还没写完呢…实在太晚就一把子推到今天了。
写这个的本意是想记录一下自己的小程序学习过程，更多的是让自己找到更多志同道合的朋友，进军IT行业，做自己热爱的事情。
日更其实是我对自己的一个要求，相信每天进步一点点，就能进步超级多！
但还是会有顾不上的到时候（其实最近拍摄作业有点多，档期有点满，不确定哪一天又顾不上更笔记了），我尽量在能更的情况下，保质保量，哈哈！

谢谢看过我文章的每一位哦~
谢谢赞过我文章的每一位哦~
谢谢收藏过我文章的每一位哦~
期待评论我文章的每一位哦~

踩一坑 填一坑

今天在运行时，发现Food页面点击商品跳转shopDetail页面的时候，出现了数据渲染错误的问题
像这样

我盯着代码看了很久，从wxml排查到js，确认逻辑一定没有问题！但是为什么就传错了呢！于是开启了漫长的数据排查工作

我先是怀疑请求时出错
给success中做了个控制器输出
一看 确实没数据
再又想了想，是不是id传错了？
又在接收id那段做了控制台输出

一看 好家伙 果然是

这id怎么等于item.id去了？
立刻飞去Food.wxml

麻了一下 忘记加{{}}号了，救命！

改了一下，看见数据 身心舒畅啊~
下次一定谨慎检查完基础语法，再也不犯这种基础毛病了。

你敢信我开始以为是wxml的逻辑错了，我把静态的做了一遍，又填了动态的进去，发现还是有问题，然后我才再考虑到js，眼睛从头看到尾就是没发现问题，之后才想的测试，最后错在food页面，我真的是…
所以下次出bug一定先找到问题所在，然后再去测试排查
不要光眼睛看 脑子分析 咱动手敲起键盘一句句测试