小程序上線刷爆了朋友圈,但是最近漸漸消沉了,很少有動(dòng)靜!最近公司項(xiàng)目需要,體驗(yàn)了一下微信小程序,制作了幾個(gè)功能,布局感覺(jué)很簡(jiǎn)單,但是交互和動(dòng)畫(huà)等寫(xiě)起來(lái)確實(shí)很費(fèi)勁,主要是因?yàn)樗荒懿僮鱀OM,只能修改數(shù)據(jù)!下面介紹一下我制作小程序完成的幾個(gè)小的功能,希望能夠給開(kāi)發(fā)小程序的朋友帶來(lái)幫助!
小程序制作回到頂部,或者滾動(dòng)到某個(gè)位置,很簡(jiǎn)單,也有很多實(shí)現(xiàn)方法! 例如:
1、動(dòng)態(tài)改變它的 scroll-top
2、scroll-into-view 滾動(dòng)到某個(gè)ID的位置
但是,問(wèn)題來(lái)了,這個(gè)效果是瞬間到底頂部或者某個(gè)位置,并沒(méi)有動(dòng)畫(huà)效果(也就是我博客右側(cè)回到頂部的那個(gè)慢慢上滑的動(dòng)畫(huà),關(guān)于js實(shí)現(xiàn)方式,我之前文章中有提及過(guò),具體請(qǐng)看)。這個(gè)動(dòng)畫(huà)如何制作呢?查看了動(dòng)畫(huà)API wx.createAnimation(OBJECT) 貌似并不能實(shí)現(xiàn)這個(gè)效果!
那么怎么辦呢?
我是用setInterval不斷改變scroll-top來(lái)實(shí)現(xiàn)這個(gè)效果的!
WXML頁(yè)面綁定scroll-top
scroll-top="{{scrollTo}}"
js的data中設(shè)置初始化scrollTo:0
核心代碼如下:
if(typeof setdsq != null){ clearInterval(setdsq); } let scrollTops=num*ONEHEIGHT,oldTops=_this.data.scrollTo; if(oldTops<scrollTops){//初始化滾動(dòng)高度和目前滾動(dòng)高度做對(duì)比 var scrollnum=(scrollTops-oldTops)/10;//每50毫秒增加減少的數(shù)量 var setdsq=setInterval(function(){ oldTops+=scrollnum; if(oldTops<scrollTops){ _this.setData({scrollTo:oldTops}) }else{ clearInterval(setdsq) } },50) }else{ var scrollnum=(oldTops-scrollTops)/10; var setdsq=setInterval(function(){ oldTops-=scrollnum; if(scrollTops<oldTops){ _this.setData({scrollTo:oldTops}) }else{ clearInterval(setdsq) } },50) }
解釋 num 是第幾個(gè)菜單,通過(guò)currentTarget.dataset獲取,ONEHEIGHT是一個(gè)常量,表示菜單內(nèi)容的高度。
我們一般通過(guò)如下方式做
WXML:
<button class="{{select == 0 ? 'gray':'red'}}">按鈕<button>
js:
//只需要?jiǎng)討B(tài)變更select既可以改變class渲染 var _this= this; _this.setData({ select: !that.data.select; });
js設(shè)置如下:
data: { currentIndex:0,//默認(rèn)index navScr:[HX_ON,ZX_OFF,SQ_OFF,WY_OFF,QY_OFF,BL_OFF],//HX_ON等都是定義的圖片路徑常量,在配置文件中 iconOn:[HX_ON,ZX_ON,SQ_ON,WY_ON,QY_ON,BL_ON],//HX_ON等都是定義的圖片路徑常量,在配置文件中 iconOff:[HX_OFF,ZX_OFF,SQ_OFF,WY_OFF,QY_OFF,BL_OFF],//HX_OFF等都是定義的圖片路徑常量,在配置文件中 navClass:["navLihover","","","","",""] },
核心函數(shù)部分代碼如下:
let _this = this; let _arr= [], _class=[]; for(let i = 0; i < _this.data.iconOn.length ; i++){ if( i == num ){//num代碼當(dāng)前選中的導(dǎo)航的index,,前臺(tái)頁(yè)面設(shè)置,js中可以通過(guò)event.currentTarget.dataset獲得 _arr[i] = _this.data.iconOn[i]; _class[i] = 'navLihover'; }else{ _arr[i] = _this.data.iconOff[i]; _class[i] = ''; } } _this.setData({ navScr:_arr, navClass:_class, currentIndex:num });
初始化的時(shí)候定義幾個(gè)常量
const LENGTH=5; const CLS_ON="../../images/star/on.png"; const CLS_OFF="../../images/star/off.png"; const CLS_HALF="../../images/star/half.png";
評(píng)分判斷
//評(píng)分判斷 let starArray=[]; let score =Math.floor(lpData.data.comment.sRate*2)/2; //lpData.data.comment.sRate表示獲取當(dāng)前評(píng)分,例如:4.65等 let hasDecimal =score %1 !==0; let integer =Math.floor(score); for (let i=0;i<integer;i++){ starArray.push(CLS_ON) } if(hasDecimal){ starArray.push(CLS_HALF) } while(starArray.length<LENGTH){ starArray.push(CLS_OFF) } //左側(cè)導(dǎo)航數(shù)組 _this.setData({ star:starArray })
循環(huán)star數(shù)組就可以出來(lái)星星。
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務(wù)