<!--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. Android4.4 ContentResolver查询图片无效 及 图库删除 增加图片后,ContentResolver不更新的问题解决

    问题背景: 参考链接 做了一个图片浏览,用ContentResolver扫描图库照片,且严格按照时间拍摄顺序排好序显示在listview里.如下图所示: 遇到的问题是在4.2的手机上能正常显示,但是新 ...

  2. STL 2—迭代器相关运算——advance(),distance(),next(),prev()

    迭代器的头文件中定义了4个实现迭代器模板的函数模板. 1.advance(iterator,num):将迭代器iterator 移动了num个位置 2.distance(iterator1,itera ...

  3. 无oracle客户端仅用plsql连接远程oracle

    1.在安装ORACLE服务器的机器上搜索下列文件,oci.dllocijdbc10.dllociw32.dllorannzsbb10.dlloraocci10.dlloraociei10.dllsql ...

  4. MVC bundle的使用总结

    在我们的项目里面充斥着很多静态文件,为了追求模块化.插件化很多静态文件都被设计成模块的方式或者被分解,在需要的时候在通过组合的方式在UI层上使用:这就带来一个问题,文件多了会影响浏览器加载页面的速度, ...

  5. rpm yum apt-get redhat centos ubuntu

    rpm是由红帽公司开发的软件包管理方式,使用rpm我们可以方便的进行软件的安装.查询.卸载.升级等工作.但是rpm软件包之间的依赖性问题往往会很繁琐,尤其是软件由多个rpm包组成时.Yum(全称为 Y ...

  6. 【H5】dropload (移动端下拉刷新,上拉加载)

    插件概要地址:http://ximan.github.io/dropload/ 一般下载其中的demo2对照修改即可使用. 小吐槽.我在项目中用的时候,有个后端说ajax麻烦但是还是要做体现他很热爱工 ...

  7. mac开启Airdrop的硬件要求

    OS X 10.13之后,新的airdrop需要硬件支持,需要蓝牙4.0 以及Wi-Fi 5GHz 开启!!!! 对于 OS X 10.12 以下的旧系统.即使是有线网络也可以使用,通过以下命令开启有 ...

  8. 20155220 Exp2 后门原理与实践

    20155220 Exp2 后门原理与实践 1.Windows获得Linux Shell 在windows下,打开CMD,使用ipconfig指令查看本机IP 然后使用ncat.exe程序,ncat. ...

  9. 20155311 Exp3 免杀原理与实践

    20155311 Exp3 免杀原理与实践 •免杀 一般是对恶意软件做处理,让它不被杀毒软件所检测.也是渗透测试中需要使用到的技术. [基础问题回答] (1)杀软是如何检测出恶意代码的? 1.通过特征 ...

  10. 汇编 XOR运算

     XOR运算  按位异或^ 一.按位异或^ 运算符^ 1^1=0;0^0=0; //相同则为0 0^1=1;1^0=1; //不相同为1 1101^0110=1011; // asm_XOR.c ...