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

    微信小程序生食品类简洁购物车样式模板制作设计下载

    2018-06-13 09:58 来源/作者:懒人模板 分类:小程序教程  « »
    制作好以后效果图如下:
    一、wxml页面代码如下:
    <view class="cart-list" >
        <view class="content" wx:for="{{goods}}" id="{{index}}" data-dish="{{item.id}}" style="display:flex;flex-direction:row">
            <view style="width:10%" catchtap="selectState" id="{{index}}"><icon type="success" color="#FF6537" style="margin-top:33px;"></icon></view>
            <view style="width:35%"><image src="{{item.imgUrl}}" style="width:90px;height:88px;border:1px solid #ccc"></image></view>
            <view style="display:flex;flex-direction:column;width:55%">
               <view class="goods-text" style="">
                   <text class="goods-name">{{item.name}}</text>
                   <text class="goods-price">{{item.price}}</text>
               </view>
               <view class="goods-info">{{item.pz}}</view>
               <view style="display:flex;flex-direction:row;justify-content: space-between;">
                    <view class="" style="display:flex;flex-direction:row;border:1px solid #ccc;margin-top:16px;width:70%">
                        <view class="des">-</view>
                        <view class="numInput" style=""><input type="text" value="1" style="width:40px;height:30px"/></view>
                        <view class="add">+</view>
                    </view>
                    <view class="remove" style=""><image src="{{item.delImg}}" style="28px;height:32px;"></image></view>
               </view> 
            </view>
        </view>
    </view>
    <loading hidden="{{hiddening}}">加载中..</loading>

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