一个简单微信小程序购物车功能
首先感谢王慧永分享的文章,我直接将其中滑动的事件代码直接copy过来的。http://blog.youkuaiyun.com/u011072139/article/details/54692237
通过微信小程序方法
var datas = wx.getStorageSync("cars");
和wx.setStorageSync("cars", JSON.stringify(datas));
保存读取数据,
item界面使使用position: absolute;和z-index: 4;
实现
下面就直接贴代码了
布局:
<!--pages/sideslipDel/sideslipDel.wxml-->
<view class='container0'>
<view wx:if='{
{
shoppingcars.length>0}}'>
<view class='content_top'>
<text class='content_top_txt_1'>购物车</text>
</view>
<view class='content_carts'>
<block wx:for="{
{
shoppingcars}}" wx:for-index="idx" wx:for-item="item" wx:key="key">
<view class='shoppingcaritem'>
<view class='itemContent' bindtap='changeStatus' bindtouchstart="touchS" bindtouchmove="touchM" bindtouchend="touchE" data-index='{
{
idx}}' style="{
{
item.value.txtStyle}}">
<view class='car_icon'>
<icon type='success' color='#d5242a' size='23' wx:if='{
{
item.value.isChecked}}'></icon>
<icon type='circle' color='#d5242a' size='23' wx:else></icon>
</view>
<view class='image'>
<image src='{
{
item.value.images}}' mode='widthFix'></image>
</view>
<view class='detailmess'>
<view class='text0'>
<text>{
{
item.value.name}}</text>
</view>
<view class='text2'>
<view class='text2-'>
<text class='text2-0'>单价¥</text>
<text class='text2-1'>{
{
item.value.price}}</text>
<text class='text2-2'>/{
{
item.value.unit}}</text>
</view>
</view>
<view class='add_sub_item'>
<view class='add_sub'>
<image src='../../images/image_sub.png' mode='aspectFit' catchtap='btnSub' data-index='{
{
idx}}' />
<view class='add_sub_txt'>
<text>{
{
item.value.count}}</text>
</view>
<image src='../../images/image_add.png' mode='aspectFit' catchtap='btnAdd' data-index='{
{
idx}}