小程序上线刷爆了朋友圈，但是最近渐渐消沉了，很少有动静！最近公司项目需要，体验了一下微信小程序，制作了几个功能，布局感觉很简单，但是交互和动画等写起来确实很费劲，主要是因为他不能操作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

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

按钮

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

  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","","","","",""]  },