前言：最近写的一个商城微信小程序，总结一些在项目当中遇到的问题，希望能帮到有需要的同学，也让自己加深印象。

1、首页 效果图：

实现效果：1-1.顶部固定轮滑列表

使用微信小程序原生组件<scroll-view>

‘scroll-x’ 定义横向滚动，使用 ‘position: fixed; top: 0px;’ 固定到顶部，

设置 ‘white-space: nowrap;’ 使内容在一行显示

1-2.轮播图

使用微信小程序原生组件<swiper>

‘indicator-dots’ 显示面板指示点，‘autoplay’ 自动切换，‘circular’ 采用衔接滑动

1-3.轮播公告

同上轮播图

设置属性 ‘vertical’ 定义滑动方向为纵向

1-4.商品列表排列均分

使用<view>标签布局

最外层元素设置为弹性盒子 ‘display: flex;’ ，换行显示 ‘flex-wrap: wrap;’ ，

 ‘justify-content: space-between;’ 均匀显示，子元素定义好宽高就会自动排列整齐

2、商品分类 效果图：

实现效果：2-1.侧边框

父元素使用弹性盒子布局，侧边框宽度固定，右边占满剩余的

侧边框使用微信小程序原生组件<scroll-view>

‘scroll-y’ 定义纵向滚动，高度设置为 ‘屏幕的高度 - 顶部搜索栏的高度’。

屏幕高度通过 ‘wx.getSystemInfoSync().windowHeight’ 获得

2-2.商品列表

使用微信小程序原生组件<scroll-view>

高度固定，设置为跟侧边框一样就可以了，每个商品用<view>包起来，左侧图片和右侧

描述信息使用弹性模型布局，左侧固定，右侧占满剩下的

3、购物车 效果图：

实现效果：3-1.商品列表排列，左滑显示删除按钮

使用微信小程序原生组件<scroll-view>，‘scroll-x’ 定义横向滚动

3-2.底部固定栏

使用 weui 的 ‘flex’ 布局

设置属性 ‘position: fixed; bottom: 0;’ 固定定位到底部

实现功能：3-4.点击全选，选中所有商品

checkAll() { //是否全选
    this.setData({ //全选取反
      checkAll: !this.data.checkAll
    })
    this.data.goods.forEach(element => element.pitch = this.data.checkAll) //循环赋值是否选中
    this.countTotal() //调用计算总价方法
 }

3-5.点击删除，删除该商品信息

delGoods(e) { //删除商品
    let index = e.currentTarget.dataset.delindex //获取要删除商品对象的下标
    this.data.goods.splice(index, 1) //删除对象
    wx.showToast({
      title: '删除成功！',
      icon: 'success',
      duration: 1000
    });
    this.quantity() //调用获取商品数量方法
    this.countTotal() //调用计算总价方法
}

3-6.点击结算，结算所有选中商品

closeAnAccount() {
    // 结算
    for (let i = this.data.goods.length-1; i >= 0; i--) {
      if (this.data.goods[i].pitch) { //判断选中商品
        this.data.goods.splice(i, 1)
      }
    }
    wx.showToast({
      title: '购买成功！',
      icon: 'success',
      duration: 2000
    });
    this.quantity() //调用获取商品数量方法
    this.countTotal() //调用计算总价方法
}

3-7.点击加减，增加或减少商品数量（最少为1）

numberOperator(e) { //加减数量
    let index = e.currentTarget.dataset.index //获取下标
    if (e.currentTarget.dataset.operator == '-') {
      if (this.data.goods[index].numbers > 1) { //数量不能小于1
        this.data.goods[index].numbers--
      }
    } else {
      this.data.goods[index].numbers++
    }
    this.countTotal() //调用计算总价方法
}

3-8.选中商品时，计算所有选中商品总价

countTotal() { //计算总价
    let total = 0, //总价
      isdisabled = true, //是否禁用结算按钮
      checkall = true; //是否全选
    this.data.goods.forEach(element => {
      if (element.pitch) { //循环判断选中商品累加商品价钱,取消结算按钮禁用状态
        total += element.price * element.numbers
        isdisabled = false
      } else { //未选中时，取消全选状态
        checkall = false
      }
    })
    if (!this.data.goods.length) checkall = false //当商品列表为空时，取消全选
    this.setData({
      goods: this.data.goods,
      total: total,
      isDisabled: isdisabled,
      checkAll: checkall
    })
 }

4、个人中心 效果图：

实现效果：4-1.获取用户头像，名称

使用微信小程序原生组件

<open-data type="userAvatarUrl"></open-data> <!-- 获取用户头像 -->
<open-data type="userNickName"></open-data> <!-- 获取用户昵称 -->

4-2.功能列表排列

订单信息使用weui的 flex 组件布局

功能列表使用weui的列表组件布局

根据需要重写一部分样式即可