微信小程序开发实战（三）自定义UI样式---增加减少按钮

本文主要是介绍微信小程序开发实战（三）自定义UI样式---增加减少按钮，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

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
    })
  },




  onl oad: function () {

  },


})

这篇关于微信小程序开发实战（三）自定义UI样式---增加减少按钮的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！