2020年7月21日

微信小程序切图spinner数字加减组件


常用数字加减的组件术语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 () {
}
})


 

本文由专业的WEB前端外包公司-切图网原创,转载请保留版权( WEB前端开发外包www.qietu.com切图网始于2007年,提供高品质的前端开发服务、前端外包、切图外包。欢迎来电咨询!热线:027-81777732、13343477732

标签: