wxml

<view class="wrap"><view class="person"><view class="personNum"><view class="text">成人</view><view class="outer"><view class="minus" bindtap="minusAdultNum">—</view><view class="num">{{adultNum}}</view><view class="plus" bindtap="plusAdultNum">+</view></view></view><view class="personNum ml-30"><view class="text">兒童</view><view class="outer"><view class="minus" bindtap="minusChildNum">—</view><view class="num">{{childNum}}</view><view class="plus" bindtap="plusChildNum">+</view></view></view></view><button class="sureBtn" catchtap="searchProduct">確定</button> </view>

css

page {width: 100%;height: 100%;background: #f0eff5 } .person {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;background-color: #fff;height: 1.813333rem;line-height: 1.813333rem;padding: .8rem .533333rem;position: relative }.person:before {content: '';width: 200%;height: 0;position: absolute;left: 0;bottom: 0;border-bottom: 1px solid #d6d6d6;-webkit-transform: scale(.5);transform: scale(.5);-webkit-transform-origin: 0 0;transform-origin: 0 0;box-sizing: border-box }.person .ml-30 {margin-left: .8rem }.person .personNum {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-flex: 1;-ms-flex: 1;flex: 1 }.person .personNum .text {font-size: 24rpx;color: #536277;margin-right: .266667rem }.person .personNum .outer {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-flex: 1;-ms-flex: 1;flex: 1;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;border: 1.5px solid #a9b1bb;border-radius: 8px }.person .personNum .outer view {-webkit-box-flex: 1;-ms-flex: 1;flex: 1;text-align: center }.person .personNum .outer view.num {border-left: 1.5px solid #a9b1bb;border-right: 1.5px solid #a9b1bb }.person .personNum .outer view.minus, .person .personNum .outer view.plus {width: 25%;height: 1.813333rem;display: block;text-align: center }.person .personNum .outer view.minus {font-size: 28rpx;line-height: 1.813333rem;font-weight: 700 }.person .personNum .outer view.plus {font-size: 48rpx;line-height: 1.6rem }.person .remind {width: 1.333333rem;height: 1.813333rem;text-align: center }.person .remind image {width: .8rem;height: .8rem;margin-top: .506667rem }.sureBtn {color: #fff;background-color: #58a4ef;width: 90%;margin-top: 1.333333rem}

js

var adultNum = 0; var childNum = 0;Page({data: {adultNum: adultNum,childNum: childNum,},plusAdultNum: function () {//增加成人的數量adultNum = this.data.adultNum;adultNum++;this.setData({adultNum: adultNum})},plusChildNum: function () {//增加兒童的數量childNum = this.data.childNum;childNum++;this.setData({childNum: childNum})},minusAdultNum: function () {//減少成人的數量adultNum = this.data.adultNum;adultNum--;this.setData({adultNum: adultNum})},minusChildNum: function () {//減少兒童的數量childNum = this.data.childNum;childNum--;this.setData({childNum: childNum})},onLoad: function () {},})

總結

以上是生活随笔為你收集整理的微信小程序开发实战（三）自定义UI样式---增加减少按钮的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。