<!--pages/shop/shop.wxml-->
<view wx:if="{{hasList}}">
<view class="container carts-list">
<view wx:key="isshop" wx:for="{{carts}}" class="carts-item" >
<view class="carts-choice">
<icon wx:if="{{item.selected}}" type="success" color="rgba(255,51,0,1)" size="30" bindtap="bindCheckbox" data-index="{{index}}"/>
<icon wx:else type="success" color="rgba(255,51,0,0.1)" size="30" bindtap="bindCheckbox" data-index="{{index}}"/>
</view>
<view class="carts-image">
<image src="{{item.image}}"></image>
</view>
<view class="carts-text">
<view class="carts-title">
<text>{{item.teaname}}</text>
</view>
<view class="carts-subtitle">
<text>¥{{item.price}}</text>
</view>
<!-- 加减号控制数量---------------------------------------- -->
<view class="stepper">
<!-- 减号 -->
<text class="{{minusStatuses[index]}}" disabled="true" data-index="{{index}}" bindtap="bindMinus">-</text>
<!-- 数值 -->
<!-- <input type="number" bindinput="bindManual" value="{{item.num}}" /> -->
<view class="number" bindchange="bindManual">{{item.num}}</view>
<!-- 加号 -->
<text class="normal" data-index="{{index}}" bindtap="bindPlus">+</text>
</view>
</view>
<view class="delete">
<view class="delete-img" bindtap="deleteList" data-index="{{index}}">
<image src="../../imgs/car/shopping_del.png"></image>
</view>
</view>
</view>
</view>
<!------------------------------------------ -->
<!-- 点击结算弹出框 -->
<!-- <toast show="{{toastHidden}}" bindchange="bindToastChange">
{{toastStr}}
</toast> -->
<!-- 点击结算弹出框 -->
<!-- <toast show="{{toastHidden}}" bindchange="bindToastChange">
加载
</toast> -->
<!-- 全选和结算---------------------------------------- -->
<view class="carts-footer">
<view class="all-chioce">
<view class="footer-left">
<icon wx:if="{{selectedAllStatus}}" type="success" color="rgba(255,51,0,1)" size="30" bindtap="bindSelectAll"/>
<icon wx:else type="success" color="rgba(255,51,0,0.1)" size="30" bindtap="bindSelectAll"/>
<text>全选</text>
</view>
<view class="footer-right">
<view class="right-text">
<text>合计</text>
<text>{{total}}</text>
</view>
<view class="free">
<text>不含运费及优惠</text>
</view>
</view>
</view>
<view class="button">立即结算</view>
</view>
</view>
<view wx:if="{{!hasList}}" class="">
<text>购物车为空的时候的布局</text>
<view class="" bindtap="tobackHome" >返回首页</view>
</view>

微信 小程序组件 加入购物车全套 one wxml的更多相关文章

  1. 微信 小程序组件 加入购物车全套 one js

    // pages/shop/shop.js Page({ /** * 页面的初始数据 */ data: { carts: [ { teaname: '冠军乌龙茶-150g', image: '../. ...

  2. 微信 小程序组件 加入购物车全套 one wxss

    //1,wxss /*外部容器*/ .container { display: flex; flex-direction: column; align-items: center; justify-c ...

  3. 微信小程序组件设计规范

    微信小程序组件设计规范 组件化开发的思想贯穿着我开发设计过程的始终.在过去很长一段时间里,我都受益于这种思想. 组件可复用 - 减少了重复代码量 组件做为抽离的功能单元 - 方便维护 组件作为temp ...

  4. 微信小程序组件学习 -- 注册页面

    微信小程序组件使用手册地址: 1. 百度搜索"微信公众平台",扫码登录之后,点击帮助文档里面的普通小程序. 2. 接着选择"开发"-->"组件& ...

  5. 微信小程序开发:学习笔记[2]——WXML模板

    微信小程序开发:学习笔记[2]——WXML模板 快速开始 介绍 WXML 全称是 WeiXin Markup Language,是小程序框架设计的一套标签语言,结合小程序的基础组件.事件系统,可以构建 ...

  6. 【腾讯Bugly干货分享】打造“微信小程序”组件化开发框架

    本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:http://mp.weixin.qq.com/s/2nQzsuqq7Avgs8wsRizUhw 作者:Gc ...

  7. 微信小程序(组件demo)以及预览方法:(小程序交流群:604788754)

    1. 获取微信小程序的 AppID 登录 https://mp.weixin.qq.com ,就可以在网站的"设置"-"开发者设置"中,查看到微信小程序的 Ap ...

  8. 详解封装微信小程序组件及小程序坑(附带解决方案)

    一.序 上一篇介绍了如何从零开发微信小程序,博客园审核变智障了,每次代码都不算篇幅,好好滴一篇原创,不到3分钟从首页移出来了.这篇介绍一下组件封装和我的踩坑历程. 二.封装微信小程序可复用组件 首先模 ...

  9. 微信小程序组件通信

    父子通信 在子组件的对应js中 properties:{ prop名字:数据类型, prop名字:{ type:数据类型, value:默认值 } } 在父组件的wxml模板中找到子组件标签 < ...

随机推荐

  1. 【转】numpy中mean和average的区别

    转自:https://blog.csdn.net/Muzi_Water/article/details/85104941 mean和average都是计算均值的函数,在不指定权重的时候average和 ...

  2. nginx静态文件缓存的解决方案

    nginx的一大功能就是完成静态资源的分离部署,减轻后端服务器的压力,如果给这些静态资源再加一级nginx的缓存,可以进一步提升访问效率. 第一步:添加nginx.conf的http级别的缓存配置 # ...

  3. JS仿QQ空间鼠标停在长图片时候图片自动上下滚动效果

    JS仿QQ空间鼠标停在长图片时候图片自动上下滚动效果 今天是2014年第一篇博客是关于类似于我们的qq空间长图片展示效果,因为一张很长的图片不可能全部把他展示出来,所以外层用了一个容器给他一个高度,超 ...

  4. JAVA springmvc+spring+mybatis整合

    一.springmvc---controller  spring----service  mybatiss---dao pring(包括springmvc).mybatis.mybatis-sprin ...

  5. 树莓派学习笔记(2):常用linux命令

    转载请注明:@小五义http://www.cnblogs.com/xiaowuyi 1.ls命令:列出文件目录的常用命令,主要参数见下表. -a 列出目录下的所有文件,包括以.开头的隐含文件. -b ...

  6. 字典树Trie树

    摘自大佬博客 https://www.cnblogs.com/TheRoadToTheGold/p/6290732.html 给出n个单词和m个询问1.查询某个前缀是否出现过2.查询某个单词是否出现过 ...

  7. Redis数据库的安装与基本应用

    一:了解NoSQL 1:介绍:Nosql的全称是Not Only Sql,这个概念早起就有人提出,在09年的时候比较火.Nosql指的是非关系型数据库,而我们常用的都是关系型数据库.就像我们常用的my ...

  8. iterms 快捷键

    标签 新建标签:command + t 关闭标签:command + w 切换标签:command + 数字 command + 左右方向键 切换全屏:command + enter 查找:comma ...

  9. python面试题(四)

    一.数据类型 1.字典 1.1 现有字典 dict={‘a’:24,‘g’:52,‘i’:12,‘k’:33}请按字典中的 value 值进行排序? sorted(dict.items(),key=l ...

  10. 深入浅出etcd系列 – 心跳和选举

    作者:宝爷 校对:DJ 1.绪论 etcd作为华为云PaaS的核心部件,实现了PaaS大多数组件的数据持久化.集群选举.状态同步等功能.如此重要的一个部件,我们只有深入地理解其架构设计和内部工作机制, ...