常用数字加减的组件术语spinner，这个功能比较简单，如果只有一个地方调用可以用jquery写一个很容易，如果多处使用，可以用jquery的spinner组件也非常方便，如果你熟悉这一套方法的话，套用在微信小程序切图也是可以的，首先下载微信小程序spinner组件。

微信小程序spinner数字加减组件3部曲

wxml

<import is="spinner" src="../../components/spinner/spinner.wxml" />

<div class="layout layout-bg1 pb-100 pt-88">

<div class="subheader">

<div class="center">

立即购票

</div>

</div>

<block wx:for="{{spinners}}" wx:key="*this">

<template is="spinner" data="{{...item}}"></template>

</block>

</div>

wxss

/* pages/6.30_WoDeYueJian/index.wxss */

@import '../../components/spinner/spinner.wxss';

.spinner{
}

js

var Spinner = require('../../components/spinner/spinner');

// pages/6.30_WoDeYueJian/index.js

Page({

/**

* 页面的初始数据

*/

data: {

spinners: [{

index: "0",

min: 0,

max: 20,

val: 1

}]

},

/**

* 生命周期函数--监听页面加载

*/

onLoad: function (options) {

new Spinner({

onChange: this.spinnerChange

});

},

spinnerChange: function (data) {

},

/**

* 生命周期函数--监听页面初次渲染完成

*/

onReady: function () {

},

/**

* 生命周期函数--监听页面显示

*/

onShow: function () {

},

/**

* 生命周期函数--监听页面隐藏

*/

onHide: function () {

},

/**

* 生命周期函数--监听页面卸载

*/

onUnload: function () {

},

/**

* 页面相关事件处理函数--监听用户下拉动作

*/

onPullDownRefresh: function () {

},

/**

* 页面上拉触底事件的处理函数

*/

onReachBottom: function () {

},

/**

* 用户点击右上角分享

*/

onShareAppMessage: function () {
}
})


 

标签：小程序切图