微信小程序开发实战（三）自定义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}

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样式---增加减少按钮相关推荐

《微信小程序开发实战》课后题
黑马程序员版<微信小程序开发实战> 第一章填空题 1.微信小程序可以通过________方式打开. 答案:扫描二维码 2.微信开发者工具中的上传是指将代码上传到________. 答案: ...
微信小程序开发的三种模式
摘要:截止到2018年6月底,正式上线发布的微信小程序已超过100万个.而越来越多的公司也已经在做微信小程序开发,许多人会觉得"微信小程序开发是开发者们的专利".答案是否定的,今天 ...
微信小程序python入门教程-2020Python+微信小程序开发实战（视频+课件）
本套课程出自老男孩IT教程的Python+微信小程序开发实战官网售价79元,课程基于微信小程序平台开发的的拍卖系统.课程分为4个章节微信小程序快速入门用微信小程序快速开发认证和发布动态模块,第二章拍卖 ...
王者级微信小程序开发实战教学从零到高手搭建微信小程序框架开发教程
王者级微信小程序开发实战教学从零到高手搭建微信小程序框架开发教程小程序进阶王者级微信小程序开发实战教学课程,讲师手把手对同学们进行微信小程序开发的进阶实战,从零开始搭建,从本地到云端开始系统化的 ...
视频教程-微信小程序开发实战之番茄时钟开发-微信开发
微信小程序开发实战之番茄时钟开发 4年web前后端开发经验,熟悉PHP,Python后端技术,熟悉基于Lnmp环境的项目开发和部署,擅长Yii,ThinkPHP,CI,Django,Flask等国内外 ...
微信小程序开发实战（9）：单行输入和多行输入组件
-----------支持作者请转发本文----------- 1. 单行输入组件(input) input组件用于录入单行文本,尽管input的基本功能是文本录入,但该组件的属性还是比较多的,也比 ...
JEECG社区微信小程序开发实战-张代浩-专题视频课程
JEECG社区微信小程序开发实战-511人已学习课程介绍微信小程序开发培训,包含环境搭建.实例讲解.对接支付功能等课题. 课程收益微信小程序开发培训,包含环境搭建.实例讲 ...
微信小程序开发实战课程之油耗计算器-耿广龙-专题视频课程
微信小程序开发实战课程之油耗计算器-3406人已学习课程介绍微信小程序开发实战课程之油耗计算器,通过练习开发工具类的油耗计算器小程序,可以帮助大家了解微信小程序的API,相关组件的 ...
微信小程序|开发实战篇之一
开发实战篇之一前言 1.通用方法的封装 2.数据获取方法的封装 2.1 抽离classic.js中的request()方法 2.2 组件数据传递 3.movie组件的创建 3.1 组件代码开发 3. ...

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

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

最新文章

热门文章