前言

小程序上線刷爆了朋友圈，但是最近漸漸消沉了，很少有動(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)動(dòng)畫(huà)制作

小程序制作回到頂部，或者滾動(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)容的高度。

單擊添加移除class

我們一般通過(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;
});

點(diǎn)擊改變圖標(biāo)（每個(gè)菜單圖標(biāo)不一致）

 

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
      });

評(píng)分星星制作

 

初始化的時(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)星星。

案例效果圖