微信小程序示例：滚动动画、点击事件及评分星星详解

　　微信小程序轰动整个朋友圈，微信小程序的上线是必然的，你想啊，微信功能如此强大，势必会开发微信小程序，看似简单方便操作的小程序，对于小程序开发者来说，开发小程序是个不容易的差事，如果你需要制作几个功能，但是交互和动画等写起来确实很烧脑，今天小编就来介绍一下微信小程序示例：滚动动画、点击事件及评分星星详解，需要的朋友可以参考下。

　　一、微信小程序滚动动画制作

　　小程序制作回到顶部，或者滚动到某个位置，很简单，也有很多实现方法! 例如：

　　1、动态改变它的 scroll-top

　　2、scroll-into-view 滚动到某个ID的位置

　　但是，问题来了，这个效果是瞬间到底顶部或者某个位置，并没有动画效果。这个动画如何制作呢?查看了动画API wx.createAnimation(OBJECT) 貌似并不能实现这个效果!

　　那么怎么办呢?

　　我是用setInterval不断改变scroll-top来实现这个效果的!

　　WXML页面绑定scroll-top

　　scroll-top="{{scrollTo}}"

　　js的data中设置初始化scrollTo:0

　　核心代码如下：

　　if(typeof setdsq != null){

　　clearInterval(setdsq);

　　}

　　let scrollTops=num*ONEHEIGHT,oldTops=_this.data.scrollTo;

　　if(oldTops

　　var scrollnum=(scrollTops-oldTops)/10;//每50毫秒增加减少的数量

　　var setdsq=setInterval(function(){

　　oldTops+=scrollnum;

　　if(oldTops

　　_this.setData({scrollTo:oldTops})

　　}else{

　　clearInterval(setdsq)

　　}

　　},50)

　　}else{

　　var scrollnum=(oldTops-scrollTops)/10;

　　var setdsq=setInterval(function(){

　　oldTops-=scrollnum;

　　if(scrollTops

　　_this.setData({scrollTo:oldTops})

　　}else{

　　clearInterval(setdsq)

　　}

　　},50)

　　}

　　解释 num 是第几个菜单，通过currentTarget.dataset获取，ONEHEIGHT是一个常量，表示菜单内容的高度。

　　二、微信小程序点击事件

　　1、单击添加移除class

　　我们一般通过如下方式做

　　WXML:

　　按钮　　js:

　　//只需要动态变更select既可以改变class渲染

　　var _this= this;

　　_this.setData({

　　select: !that.data.select;

　　});

　　2、点击改变图标(每个菜单图标不一致)

　　js设置如下：

　　data: {

　　currentIndex:0,//默认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","","","","",""]

　　},

　　核心函数部分代码如下：

　　let _this = this;

　　let _arr= [], _class=[];

　　for(let i = 0; i < _this.data.iconOn.length ; i++){

　　if( i == num ){//num代码当前选中的导航的index,，前台页面设置，js中可以通过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

　　});

　　三、微信小程序评分星星制作

　　初始化的时候定义几个常量

　　const LENGTH=5;

　　const CLS_ON="../../images/star/on.png";

　　const CLS_OFF="../../images/star/off.png";

　　const CLS_HALF="../../images/star/half.png";

　　评分判断

　　//评分判断

　　let starArray=[];

　　let score =Math.floor(lpData.datament.sRate*2)/2; //lpData.datament.sRate表示获取当前评分，例如：4.65等

　　let hasDecimal =score %1 !==0;

　　let integer =Math.floor(score);

　　for (let i=0;i

　　starArray.push(CLS_ON)

　　}

　　if(hasDecimal){

　　starArray.push(CLS_HALF)

　　}

　　while(starArray.length

　　starArray.push(CLS_OFF)

　　}

　　//左侧导航数组

　　_this.setData({

　　star:starArray

　　})

　　循环star数组就可以出来星星。

　　案例效果图

　　感谢大家来到这里阅读微信小程序示例：滚动动画、点击事件及评分星星详解，但愿能够帮到大家，如需了解更多更详细的微信小程序方面的资讯，请大家来到微小乔，这里每天都有新的干货等着你。再次谢谢大家对本站的支持。

　　更多阅读推荐：

　　微信小程序模版怎么应用及简单实例

　　商家怎么入驻微信附近小程序教程

　　微信应用小程序教程?微信小程序怎么使用?