应用程序开发公司
软件开发

针对您的项目需求及预算规划量身制定方案

个体/中小企业/集团/政府机构/行业组织 了解详情 了解详情

秀杰实战教程系列《四》:倒计时组件,LXStepper组件-商品数量加减 ...

发布时间:2024-01-01 00:00 浏览次数:21

一:倒计时组件:适用于于电商应用领域的限时网购、商品秒杀等


先来看下最终效果:


git源:http://git.oschina.net/dotton/CountDown


分后步骤-性子着急的朋友,可以轻易看看最后那段代码。


wxml文件摆个text


second: {{second}} micro second:{{micro_second}}


在js文件中调用


function countdown(that) {


var second = that.data.second


if (second == 0) {


// console.log("Time Out...");


that.setData({


second: "Time Out..."


});


return ;


}


var time = setTimeout(function(){


that.setData({


second: second - 1


});


countdown(that);


}


,1000)


}


Page({


data: {


second: 3


},


onLoad: function() {


countdown(this);


}


});


运转检验下,从10追到1s,然后表明时间至。


于是稳步将毫秒健全,特别注意毫秒的步长受限于系统的时间频率,于是我们准确至0.01s即10ms


js


/* 秒级倒计时 */


function countdown(that) {


var second = that.data.second


if (second == 0) {


that.setData({


second: "Time out!",


micro_second: "micro_second too."


});


clearTimeout(micro_timer);


return ;


}


var timer = setTimeout(function(){


that.setData({


second: second - 1


});


countdown(that);


}


,1000)


}


/* 毫秒级倒计时 */


// 起始毫秒数,同时用做失效


var micro_second_init = 100;


// 当前毫秒数


var micro_second_current = micro_second_init;


// 毫秒计时器


var micro_timer;


function countdown4micro(that) {


if (micro_second_current <= 0) {


micro_second_current = micro_second_init;


}


micro_timer = setTimeout(function(){


that.setData({


micro_second: micro_second_current - 1


});


micro_second_current--;


countdown4micro(that);


}


,10)


}


Page({


data: {


second: 2,


micro_second: micro_second_init


},


onLoad: function() {


countdown(this);


countdown4micro(this);


}


});


wxml文件


second: {{second}}s


{{micro_second}}


如此,当秒级运转完时,毫秒级timer即clearTimeout,并将字本表明为'micro_second too'


再嵌入一个countdown4micro方法,使表明余下 0:3:19 89这样形式的倒数


function dateformat(second) {


var dateStr = "";


var hr = Math.floor(second / 3600);


var min = Math.floor((second - hr * 3600) / 60);


var sec = (second - hr * 3600 - min * 60);// equal to => var sec = second % 60;


dateStr = hr + ":" + min + ":" + sec;


return dateStr;


}


目前存有2个时钟,影响性能,分拆下去掉下来countdown,于是countdown4micro变为以下的样子:


function countdown4micro(that) {


var loop_second = Math.floor(loop_index / 100);


// 获知经历了1s


if (cost_micro_second != loop_second) {


// 剥夺新值


cost_micro_second = loop_second;


// 总秒数减至1


total_second--;


}


// 内要一秒,表明值减1; 图形倒计时时钟


that.setData({


clock:dateformat(total_second - 1)


});


if (total_second == 0) {


that.setData({


// micro_second: "",


clock:"时间至"


});


clearTimeout(micro_timer);


return ;


}


if (micro_second_current <= 0) {


micro_second_current = micro_second_init;


}


micro_timer = setTimeout(function(){


that.setData({


micro_second: micro_second_current - 1


});


micro_second_current--;


// 放到最后++,不然时钟暂停时除了10毫秒余下


loop_index ++;


countdown4micro(that);


}


,10)


}


如此这般,毫秒与时分秒就是分别运转图形的,再次改建,程序可读性更好。dateformat针对于毫秒操作方式,而不拒绝接受秒为数。同时还省去了排序100次为1s的运算


/**


* 须要一个目标日期,初始化时,先得出结论至当前时间除了余下多少秒


* 1.将秒数改成格式化输入为XX天XX小时XX分钟XX秒 XX


* 2.提供更多一个时钟,每10ms运转一次,图形时钟,再总ms数自减至10


* 3.余下的秒次为零时,return,得出tips提示信息说道,已经截至


*/


// 定义一个总毫秒数,以一分钟为基准。TODO,传至一个时间点,转换成总毫秒数


var total_micro_second = 2 * 1000;


/* 毫秒级倒计时 */


function countdown(that) {


// 图形倒计时时钟


that.setData({


clock:dateformat(total_micro_second)


});


if (total_micro_second <= 0) {


that.setData({


clock:"已经截至"


});


// timeout则冲破递回


return ;


}


setTimeout(function(){


// 放到最后--


total_micro_second -= 10;


countdown(that);


}


,10)


}


// 时间格式化输入,如3:25:19 86。每10ms都会调用一次


function dateformat(micro_second) {


// 秒数


var second = Math.floor(micro_second / 1000);


// 小时位


var hr = Math.floor(second / 3600);


// 分钟位


var min = Math.floor((second - hr * 3600) / 60);


// 秒位


var sec = (second - hr * 3600 - min * 60);// equal to => var sec = second % 60;


// 毫秒位,留存2十一位


var micro_sec = Math.floor((micro_second % 1000) / 10);


return hr + ":" + min + ":" + sec + " " + micro_sec;


}


Page({


data: {


clock: ''


},


onLoad: function() {


countdown(this);


}


});


经过例如上优化,代码量减少一半,运转效率也低了。


二:LXStepper组件-商品数量以此类推:适用于于购物车商品数量的以此类推


翻阅了个文档,微信没提供更多非常简单的组件,于是写下了这个大widget。


总体思路:


最左边框,最右边框由最后外层的容器的border-left与border-right预设;中间2段由input去预设;左右按钮不设立边框,圆角效果由最为外面容器去预设,这样刚好同时实现了一个耳熟能详的stepper样式。


布局:


1.1 准备工作一个容器view,设置它的阔为width: 70px;height: 21px;边框颜色为#ccc灰色;圆角3px;


1.2 内置3个组件,分别就是左text,中input,右text,之所以不必button是因为系统自带的button拎了样式,为了严格遵守设计规范,不回去改写button的样式。其中input的预设高度就是21px。宽度分别为19px,30px,19px,之所以就是19px,是因为容器拎了左右边距,共占有了2px。


1.3 3个组件都就是文字母葛氏,text-align: center同时实现;横向母葛氏采用line-height: 21px去同时实现


1.4 3个组件都就是向左浮动,由于我们排序不好3个组件的宽度绝对值,于是不必预设加号按钮的浮动float: right


布局文件代码





-





+



样式表代码


/*stepper容器*/


.stepper {


border: 1px solid #ccc;


border-radius: 3px;


width: 70px;


height: 21px;


margin:0 auto;


}


/*加号与负号*/


.stepper text {


width: 19px;


height: 28px;


line-height: 21px;


text-align: center;


float: left;


}


/*数值*/


.stepper input {


float: left;


margin: 0 auto;


width: 30px;


text-align: center;


font-size: 12px;


border-left: 1px solid #ccc;


border-right: 1px solid #ccc;


}


存取事件


2.1 准备工作两个按钮样式分别对应普通与停止使用状态


/*普通样式*/


.stepper .normal{


color: black;


}


/*停止使用样式*/


.stepper .disabled{


color: #ccc;


}


还要准备工作一个data的值对象,用作监测数值与状态的发生改变:


data: {


num: 1,


minusStatus: 'disabled'


}


2.2 加号与负号事件


2.2.1 存取text事件bindtap,分别就是bindMinus,bindPlus。按如下处置:抽出data中的num值后野扇常房自减至,对于自减至操作方式必须先推论与否大于1才搞自减至操作方式,也就是说已经就是1的时候,就不要自减了


2.2.2 当num已经为1的时候,我们将负号按钮设置为disabled样式,一旦大于1,又变成normal状态,以此类推事件均必须如此处置,不然至了临界值1的时候,回去没normal状态


js代码:


bindMinus: function() {


var num = this.data.num;


// 如果只有1件了,就不容许再减至了


if (num > 1) {


num --;


}


// 只有大于一件的时候,就可以normal状态,否则disable状态


var minusStatus = num <= 1 ? 'disabled' : 'normal';


// 将数值与状态写下回去


this.setData({


num: num,


minusStatus: minusStatus


});


},


效果例如图,特别注意负号就是灰色的#ccc


2.3 文本框输出事件


2.3.1 在wxml文件中的\监听值更改事件bindchange="bindManual"。备注:bindchange就是丧失焦点才可以调用一次的,而bininput就是每当存有值为发生改变可以存有调用一次,敲击123,则可以产生值1,12,123三次,比较适合于输出检验。


2.3.2 同时实现bindManual


bindManual: function(e) {


var num = e.detail.value;


// 将数值与状态写下回去


this.setData({


num: num


});


}


这个步骤貌似多余,实则为了num个数同步,以做为递交至网络数据时就是真正的data.num,而不是input手工重写的数值

TAG标签:
阅读推荐