微信小程序滚动动画,点击事件及评分星星制作

4141次浏览

前言

小程序上线刷爆了朋友圈,但是最近渐渐消沉了,很少有动静!最近公司项目需要,体验了一下微信小程序,制作了几个功能,布局感觉很简单,但是交互和动画等写起来确实很费劲,主要是因为他不能操作DOM,只能修改数据!下面介绍一下我制作小程序完成的几个小的功能,希望能够给开发小程序的朋友带来帮助!

滚动动画制作

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

1、动态改变它的 scroll-top

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

但是,问题来了,这个效果是瞬间到底顶部或者某个位置,并没有动画效果(也就是我博客右侧回到顶部的那个慢慢上滑的动画,关于js实现方式,我之前文章中有提及过,具体请看)。这个动画如何制作呢?查看了动画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<scrollTops){//初始化滚动高度和目前滚动高度做对比
          var scrollnum=(scrollTops-oldTops)/10;//每50毫秒增加减少的数量
        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 是第几个菜单,通过currentTarget.dataset获取,ONEHEIGHT是一个常量,表示菜单内容的高度。

单击添加移除class

我们一般通过如下方式做

WXML:

<button class="{{select == 0 ? 'gray':'red'}}">按钮<button>

js:

//只需要动态变更select既可以改变class渲染
var _this= this;
_this.setData({
  select: !that.data.select;
});

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

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.data.comment.sRate*2)/2; //lpData.data.comment.sRate表示获取当前评分,例如: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)
}
//左侧导航数组
_this.setData({
  star:starArray
  })

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

案例效果图

enter image description here

Tags: 微信小程序滚动

相关文章: