小程序数量组件

最新推荐文章于 2022-09-14 15:43:47 发布

山沟沟里的娃

最新推荐文章于 2022-09-14 15:43:47 发布

阅读量214

点赞数

分类专栏：小程序 js 文章标签：小程序前端 javascript

本文链接：https://blog.csdn.net/qq_34856863/article/details/126630321

版权

小程序同时被 2 个专栏收录

20 篇文章 2 订阅

订阅专栏

5 篇文章 0 订阅

订阅专栏

wxml文件

<view class="numberBox">
	<view class="reduce" bindtap="reduce">-</view>
	<input class="num" bindblur="numFn" value="{{num}}" type="number"/>
	<view class="plus" bindtap="plus">+</view>
</view>

wxss文件

.numberBox{
	width: 130rpx;
	height: 40rpx;
	line-height: 40rpx;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border: 2rpx solid #ccc;
	border-radius: 20rpx;
}
.numberBox .reduce,
.numberBox .plus{
	width: 40rpx;
	font-size: 24rpx;
	color: #999;
}
.numberBox .num{
	width: 46rpx;
	height: 40rpx;
	color: #333;
	font-size: 24rpx;
	line-height: 40rpx;
	text-align: center;
	border-left: 2rpx solid #ccc;
	border-right: 2rpx solid #ccc;
}

json文件

{
	"component": true,
	"usingComponents": {}
}

js文件

// component/number/number.js
Component({
	/**
	 * 组件的属性列表
	 */
	properties: {
    num: {
      type: Number,
      value: 1
		},
		type: {
			type: Number,
			value: 1
		},
		bigI: {
			type: String,
			value: ''
		},
		i: {
			type: String,
			value: ''
		}
	},
	data: {
		
	},
	methods: {
		//加
		plus(){
			let num = this.data.num * 1;
			num++;
			this.setData({
				num
			},()=>{
        this.exportNum(1);
      })
		},
		//减
		reduce(){
			let num = this.data.num * 1;
			num--;
			if(num<1){
				num = 1;
				wx.showToast({
					title: '商品数量不能再减少了~',
					icon: 'none',
					duration: 3000
				})
			}
			this.setData({
				num
			},()=>{
        this.exportNum(2);
      })
		},
		//输入
		numFn(e){
			console.log(e);
			this.setData({
				num: e.detail.value*1
			},()=>{
        this.exportNum(3);
      })
		},
		exportNum(types){
			let {num, type, bigI, i} = this.data;
			if(type==1){
				this.triggerEvent('numFn',num)
			}else{
				this.triggerEvent('numFn',{num,bigI,i,types})
			}
		}
	}
})