欢迎来到懒人模板!我们专注移动互联网,所有模板永久免费下载!
  • 首 页
  • 当前位置:主页 > 小程序教程 >

    微信小程序餐饮类红色按钮购物车结算样式模板制作设计下载

    2018-05-31 09:41 来源/作者:懒人模板 分类:小程序教程  « »
    制作好以后效果图如下:
    一、wxml页面代码如下:
    <scroll-view scroll-y="true" scroll-x="false" class="cart-list" wx:if="{{cartListShow}}">
      <view wx:for="{{postList}}" class="sub-cart-list" wx:for-item="item" wx:for-index="index">
        <view class="sub-cart-img">
          <view class="sub-cart-img-inner">
            <image src="{{item.imgSrc}}"></image>
          </view>
        </view>
        <view class="sub-cart-middle">
          <view class="sub-cart-title">
            <text>{{item.foodName}}</text>
            <text class="f20">¥{{item.price}}</text>
          </view>
          <view class="sub-cart-num">
            <view class="flex-1">数量:</view>
            <view class="flex-2">
              <image bindtap="plus" data-index="{{index}}" class="plus" src="/images/plus_gray.png"></image>
              <text class="num">{{item.num}}</text>
              <image bindtap="add" data-index="{{index}}" class="add" src="/images/add_gray.png"></image>
            </view>
          </view>
        </view>
        <view class="cart-del" bindtap="delThisFood" data-index="{{index}}">
          <image src="/images/del.png"></image>
        </view>
      </view>
    </scroll-view>
    <view class="ma_cart_none" wx:if="{{showModal}}">
      <image src="/images/cart_none.png"></image>
      <text>你还没有点餐噢~~~</text>
    </view>
    <view class="cart_total">
      <view class="cart_total_inner">
        <text class="total">合计:¥888.00</text>
        <view class="settle">结算</view>
      </view>
    </view>

    点击扫描效果预览免费下载免登陆网盘下载
    标签:
    * 懒人模板承诺:本站所有资源免费下载,无病毒,无弹窗,无干扰链接! 提点建议