小程序(购物车)

起床了
166 阅读2分钟

image.png

页面布局：

       <view class="container">
 <view class="head">
<view class="c1">

van-checkbox是引入的外部插件

  <van-checkbox value="{{ allstate }}" direction="right"   bindtap="allclick" shape="round" data-index="{{index}}" bind:change="onChange">

  </van-checkbox>
</view>
<view class="c2">名称</view>
<view class="c3">图片</view>
<view class="c4">单价</view>
<view class="c5 c6">数量</view>

</view>
 <view class="tbody" wx:for="{{list}}" wx:key="id" >
<view class="c1" >
  <van-checkbox value="{{ item.state }}" bindtap="click" data-index="{{index}}" direction="right" shape="round" bind:change="onChange">
  </van-checkbox>
</view>
<view class="c2">{{item.name}}</view>
<image src="{{item.img}}"></image>
<view class="c4">{{item.price}}</view>

<view class="c5">

count是引入的自己的插件

  <count count="{{item.count}}" bind:sync="sync" data-active="{{item.count}}" data-index="{{index}}"></count>
</view>
 </view>
<view class="tfoot">
 总价：{{zongjia}}
</view>
</view>

页面样式:

            .container{
              padding-bottom: 70rpx;
              padding-top: 60rpx;
         }
.head,
.tbody {
  display: flex;
 align-items: center;
 border: 1px solid #ccc;
 }

  .tbody {
 height: 200rpx;
  align-items: center;
margin-top: 10rpx;
 }
  .head {
 font-weight: bold;
 color: #369;
 position: fixed;
 width: 100vw;
 height: 60rpx;
 left: 0;
 top: 0;
 box-sizing: border-box;
  background-color: white;
}
 .tbody view {
 align-items: center;
 }
.c1 {
  text-align: center;
 top: 10rpx;
 left: 60rpx;
}
.c2 {
  text-align: center;
 width: 200rpx;
}
.c3 {
text-align: center;
 width: 200rpx;
}
.c4 {
 text-align: center;
 width: 130rpx;
}
.c5 {
 width: 120rpx;
 display: flex;
  margin-left: 10rpx;
}
 .c6 {
 width: 120rpx;
  margin-left: 40rpx;
  }
 image {
 width: 200rpx;
  height: 200rpx;
 }
.btn {
  position: absolute;
 top: 90rpx;
  background-color: blue;
 width: 30rpx;
  height: 30rpx;
}
 .tfoot {
  width: 100vw;
 background-color: #369;
  position: fixed;
  bottom: 0;
  text-align: right;
  color: white;
  height: 60rpx;
  line-height: 60rpx;
 }

js内容：

              Page({



  data: {
zongjia: 0,
allstate: false,
list: [{
  id: 1,
  name: "ipad2020",
  img: "https://img13.360buyimg.com/n7/jfs/t1/63049/17/17124/123885/614119adE99ef6daf/498f41cd75a643d5.jpg",
  price: 3000,
  count: 1,
  state: false
}, {
  id: 2,
  name: "苹果手机",
  img: "https://img10.360buyimg.com/n7/jfs/t1/216578/34/14150/121785/62286978E1a6f4ef0/b6b32191c26d161b.jpg",
  price: 3000,
  count: 2,
  state: true
}, {
  id: 3,
  name: "Redmi ",
  img: "https://img14.360buyimg.com/n7/jfs/t1/206463/36/24196/240230/62c242d7Ecfdf0c95/d884aa361b023132.jpg",
  price: 649,
  count: 3,
  state: false
}, {
  id: 4,
  name: "苹果手机",
  img: "https://img13.360buyimg.com/n7/jfs/t1/131895/35/15668/114276/5facca78E64ee648d/8a6836a4352097c6.jpg",
  price: 798,
  count: 4,
  state: true
}, {
  id: 5,
  name: "荣耀X30",
  img: "https://img13.360buyimg.com/n7/jfs/t1/219583/26/7800/151098/61b8a3f2E2879c4f6/9b73c1d24e0abecb.jpg",
  price: 3000,
  count: 5,
  state: false
}, {
  id: 6,
  name: "小米手环7",
  img: "https://img10.360buyimg.com/n7/jfs/t1/50351/22/19994/144324/62c4218bE4502b792/e86efc4060e5c29e.jpg",
  price: 249,
  count: 6,
  state: true
}, {
  id: 7,
  name: "华为手环7",
  img: "https://img14.360buyimg.com/n7/jfs/t1/63624/31/19075/138538/62be4452E86d6763f/b3ff470df26ccae1.jpg",
  price: 269,
  count: 7,
  state: false
}, {
  id: 8,
  name: "keep",
  img: "https://img14.360buyimg.com/n7/jfs/t1/208002/5/23296/79483/62bc1e6fEd1f46503/9ffa45c133ba3fc8.jpg",
  price: 239,
  count: 8,
  state: true
} , {
  id: 9,
  name: "华为电脑4499",
  img: "https://img12.360buyimg.com/n7/jfs/t1/42776/10/17345/131277/626bc1e3Eb2b0278a/1dc51316f3dc1898.jpg",
  price: 239,
  count: 9,
  state: true
}, {
  id: 10,
  name: "联想电脑",
  img: "https://img13.360buyimg.com/n7/jfs/t1/90098/32/26125/190323/62c453a0Efd425f4f/c045593bd4eda66b.jpg",
  price: 2499,
  count: 10,
  state: true
}, {
  id: 11,
  name: "戴尔电脑",
  img: "https://img10.360buyimg.com/n7/jfs/t1/57700/40/19254/249896/62986d0dE360c1213/e13cf0b037a552fe.jpg",
  price: 3299,
  count: 11,
  state: true
}, {
  id: 12,
  name: "惠普",
  img: "https://img12.360buyimg.com/n7/jfs/t1/109557/34/31290/234237/62bd1a17E5d33826d/ce8a57581b2031c6.jpg",
  price: 3739,
  count: 12,
  state: true
}, {
  id: 13,
  name: "MackBook",
  img: "https://img12.360buyimg.com/n7/jfs/t1/94044/14/23840/168256/62c3a0a7E2a6d379c/1cf72185587017bc.jpg",
  price: 13998,
  count: 13,
  state: true
}]
 },

总价

 sum() {
let sum = 0
this.data.list.forEach(r => {
  if (r.state) {
    sum += r.count * r.price
 }
  this.setData({
    zongjia: sum
  })
})
  },

判断状态

  click(e) {
let {
  index
} = e.currentTarget.dataset
this.data.list[index].state = !this.data.list[index].state
this.setData({
  list: this.data.list
})
this.allchange()
this.sum()

},

点击全选按钮

 allclick(e) {
this.data.allstate = !this.data.allstate
this.setData({
  allstate: this.data.allstate
})
this.data.list.forEach(r => {
  r.state = this.data.allstate
  })
this.setData({
  list: this.data.list
})
this.sum()
},

判断所有按钮是否都是选中状态。如果是，就令全选按钮为选中状态

 allchange() {
this.data.allstate = this.data.list.every(r=>r.state)
this.setData({
  allstate: this.data.allstate
})
 },

自定义事件 ，点击+和-的时候重新赋值并调用求和

  sync(e) {
let {
  detail
} = e
let {
  index
} = e.currentTarget.dataset
this.data.list[index].count = detail
this.setData({
  list: this.data.list
})
this.sum()
},

触底给出提示

onReachBottom() {
wx.$msg("没有更多了")
},

image.png 生命周期函数--监听页面加载

 onLoad(options) {
this.allchange()
this.sum()

},
})

自己的插件

先创建一个文件夹，在文件夹里创建一个文件，然后点击该文件选择新建Component

页面布局：

       <view class="box">
   <view>{{label}}</view>
  <view class="btn" bindtap="jian">-</view>
  <view class="count">{{count}}</view>
   <view class="btn" bindtap="jia">+</view>
  </view>

页面样式：

  .hr {
 border-bottom: 1px solid #ccc;
}

   .box {
  display: flex;
  }

.btn {
  background-color: #369;
color:white;
  width: 36rpx;
 height: 36rpx;
  line-height: 36rpx;
 text-align: center;
  margin: 6rpx 10rpx;

}

js内容：

                       Component({

组件的属性列表

  properties: {
label: {
  type: String
},
count: {
  type: Number
},
min: {
  type: Number,
  value: 1
},
max: {
  type: Number,
  value: 20
}
},

组件的初始数据

 data: {

  },

组件的方法列表

  methods: {
jian(e) {
  let {
    active
  } = e.currentTarget.dataset
  if (this.data.count > this.data.min) {
    this.setData({
      count: --this.data.count
    })

this.triggerEvent('myevent', myEventDetail, myEventOption)

①。第一个参数是自定义事件名

②。第二个参数是detail对象，提供给事件监听函数

③。第三个参数是触发事件的选项

    this.triggerEvent("sync", this.data.count)
  } else {
    wx.$msg("没有更多了")
  }
},
jia(e) {
  let {
    active
  } = e.currentTarget.dataset
  console.log(active);
  if (this.data.count < this.data.max) {
    this.setData({
      count: ++this.data.count
    })
    this.triggerEvent("sync", this.data.count)
  } else {
    wx.$msg("不能再加了")
  }
}
 }
})
avatar
文章
阅读
粉丝