微信小程序动画渐入以及动态存值setdata问题

想要在微信小程序中制作多个元素逐一渐入的效果，效果类似下图：

首先参考微信开发文档API动画部分的内容
开发文档API–动画Animation

创建动画执行函数

animationShow: function (){   //创建动画对象    this.animation = wx.createAnimation({  duration: 2000,//动画执行时间      timingFunction: 'ease',//动画以低速开始，然后加快，在结束前变慢      delay:delay//延迟时间    }); //此处为动画执行内容-----透明度变化至1--y轴位移至0   this.animation.translateY(0).opacity(1).step();    this.setData({//[ ]--------用中括号将变量包含其中，否则作为页面元素名称解析    //此处animation为绑定xml内对应的元素//（此处animation类似字符串形式，并非变量---类似Map存储的键值对）  animation1: this.animation.export()    }）
}

前台页面为：

<!--animation="{{animation1}}"即为其对应绑定的动画，key为animation1（js处setData的值this.animation.export()  ）-->
<!--wx:for="{{list}}"为循环打印的后台元素集合list-->
<view class="init" wx:for="{{list}}" animation="{{animation1}}">    姓名：{{item}}</view>

并需要先为其添加css样式，先让其隐藏，即y轴-80px,透明度设为0：

.init { opacity: 0; transform: translateY(-80px)
}

后台数据传入，此处采用SpringBoot框架进行后台搭建：

/*** 小程序调用测试* @return*/
@ResponseBody
@RequestMapping("getUser")
public Map<String, Object> getUser(){System.out.println("微信小程序正在调用。。。");Map<String, Object> map = new HashMap<String, Object>();List<String> list = new ArrayList<String>();list.add("zhangsan");list.add("lisi");list.add("wanger");list.add("mazi");map.put("list",list);System.out.println("微信小程序调用完成。。。");return map;
}

微信前台通过js调用wx.request()进行后台访问
此处需注意：

调用request的具体方法参考官方文档：API网络

houduanButton1:function(){var that = this;var animationIN = this.animationShow()；/***网络请求部分----得到后台list并传入page中的data内**/wx.request({url: 'http://localhost:8080/getUser',method:'GET',header: {'content-type': 'application/json' // 默认值},success:function(res){var list = res.data.list;if(list == null){var result = "数据获取失败";wx.showToast({title: result,icon:'loading',duration:2000})}else{result = "数据获取成功！！";//显示结果--------即gif中的勾x.showToast({title: result,icon: 'success',duration: 2000})that.setData({list:list//传递数据});}}
})
},

此时无动态效果，考虑到元素需要逐个渐入，所以需要给其一个delay值：
参考
对代码进行修改：

修改后：
xml:

    <!--pages/test/test.wxml-->
<button class="init"bindtap='houduanButton1'animation="{{animation1}}">点击发起请求</button>
<view class="init" wx:for="{{list}}" animation="{{animationlist[index]}}">姓名：{{item}}
</view><input type="text" class="houduanTab_input" placeholder="请输入你要查询的内容" bindinput='houduanTab_input'animation="{{animation1}}"></input>
<button class="init"bindtap='houduanButton2'animation="{{animation1}}">查询</button>
<view wx:if="{{message!=''}}">{{message}}
</view><swiper indicator-dots="{{indicatorDots}}"autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"><block wx:if="{{imgUrls}}"wx:for="{{imgUrls}}"><swiper-item><image src="{{item}}" class="slide-image" width="355" height="150"/></swiper-item></block>
</swiper>

js:

// pages/test/test.js
Page({/*** 页面的初始数据*/data: {imgUrls:"",indicatorDots: false,autoplay: true,interval: 5000,duration: 1000,animation1: "",animationlist: "",list:""},/*** 动画实现*/animationShow: function (animationname,delay){//var animation1 = this.data.animation1;console.log(animationname)//传入名称----字符串//创建动画对象this.animation = wx.createAnimation({duration: 2000,//动画执行时间timingFunction: 'ease',//动画以低速开始，然后加快，在结束前变慢delay:delay//延迟时间
});this.animation.translateY(0).opacity(1).step();this.setData({//[]--------用中括号将变量包含其中，否则作为页面元素名称解析[animationname]: this.animation.export()
})},houduanButton1:function(){var that = this;var animationIN = this.animationShow();console.log(this.data.list);wx.request({url: 'http://localhost:8080/getUser',method:'GET',header: {'content-type': 'application/json' // 默认值},success:function(res){//console.log(res.data);var list = res.data.list;if(list == null){var result = "数据获取失败";wx.showToast({title: result,icon:'loading',duration:2000})}else{result = "数据获取成功！！";wx.showToast({title: result,icon: 'success',duration: 2000})//console.log(list)that.setData({list:list});console.log(list)var animationlist = that.data.animationlist;//调用自定义函数，this.for (var i = 0; i < list.length; i++) {that.animationShow("animationlist["+i+"]",i * 100)};}}
})//this.animationShow()},//获取输入框的内容houduanTab_input: function (e) {this.setData({word1: e.detail.value//实时输入值
});console.log(e.detail);},// houduanButton2的网络请求houduanButton2: function () {var that = this;console.log(that);wx.request({url: 'http://localhost:8080/getWord',data: {word1: that.data.word1//输入值},method: 'GET',header: {'content-type': 'application/json' // 默认值},success: function (res) {console.log(res.data)//打印到控制台var message = res.data.message;if (message == null) {var toastText = '数据获取失败';wx.showToast({title: toastText,icon: '',duration: 2000});} else {that.setData({message: message})}}
})},onLoad: function (options) {var that = this;//调用动画this.animationShow('animation1',1);wx.request({url: 'http://localhost:8080/save',method: 'GET',header: {'content-type': 'application/json' // 默认值},success: function (res) {console.log(res.data)//打印到控制台var images = res.data.img;if (images == null) {var toastText = '数据获取失败';wx.showToast({title: toastText,icon: '',duration: 2000});} else {that.setData({imgUrls :images})}}
})},})

后台：

package com.example.demo02.controller;import com.example.demo02.controller.DomObject.User;
import com.example.demo02.controller.DomObject.UserDaoImpl;
import com.example.demo02.controller.DomObject.UserService;
import com.sun.deploy.net.HttpResponse;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpRequest;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.util.*;@Controller
public class Hello {@Autowiredprivate UserService p;@ResponseBody@RequestMapping("/helloWX")public String hello(){System.out.println("222222");
//        p.getUser();
//        System.out.println(p.getUser());return "hello!";}/*** 连接数据库* @param* @return*/@ResponseBody@RequestMapping("/save")public Map<String, List>  save(HttpServletRequest request, HttpServletResponse response) {User user = new User();System.out.println("11111111111");user.setDm_username("dvsavwww");p.save(user);Map<Integer, String>  image = p.getImage();List<String> lists = new ArrayList<>();Iterator<Integer> iterator = image.keySet().iterator();while(iterator.hasNext()){Integer key = iterator.next();//System.out.println((String)image.get(key));String s = image.get(key);System.out.println(s);lists.add(s);}Map<String,List> mapp = new HashMap<>();mapp.put("img",lists);HttpSession session = request.getSession();session.setAttribute("images",image);return mapp;}@RequestMapping(value="/params", method = RequestMethod.GET)/* 后台用Map方法向前端传递参数* 传递的参数为message1: String, message2: String, user: User对象*/public String passParam(Map <String, Object> map){map.put("message1", "Hello, Spring Boot!");map.put("message2", "Hello, Spring Boot!");System.out.println("params");//User user = new User(18, "Bruce");//map.put("user", user);return "hh";}/*** 小程序调用测试* @return*/@ResponseBody@RequestMapping("getUser")public Map<String, Object> getUser(){System.out.println("微信小程序正在调用。。。");Map<String, Object> map = new HashMap<String, Object>();List<String> list = new ArrayList<String>();list.add("zhangsan");list.add("lisi");list.add("wanger");list.add("mazi");map.put("list",list);System.out.println("微信小程序调用完成。。。");return map;}@ResponseBody@RequestMapping("getWord")public Map<String, Object> getText(String word1){Map<String, Object> map = new HashMap<String, Object>();System.out.println(word1);System.out.println("调用~~~");String message = "我能力有限，不要为难我";if ("后来".equals(word1)) {message="正在热映的后来的我们是刘若英的处女作。";}else if("微信小程序".equals(word1)){message= "想获取更多微信小程序相关知识，请更多的阅读微信官方文档，还有其他更多微信开发相关的内容，学无止境。";}else if("西安工业大学".equals(word1)){message="西安工业大学（Xi'an Technological University）简称”西安工大“，位于世界历史名城古都西安，是中国西北地区唯一一所以兵工为特色，以工为主，理、文、经、管、法协调发展的教学研究型大学。原中华人民共和国兵器工业部直属的七所本科院校之一（“兵工七子”），陕西省重点建设的高水平教学研究型大学、陕西省人民政府与中国兵器工业集团、国防科技工业局共建高校、教育部“卓越工程师教育培养计划”试点高校、陕西省大学生创新能力培养综合改革试点学校。国家二级保密资格单位，是一所以\"军民结合，寓军于民\"的国防科研高校。";}map.put("message", message);System.out.println("完成~~");return map;}@RequestMapping("")public String getText(){return "hello world";}@ResponseBody@RequestMapping("images")public Map<String,Object> getImages(){HashMap<String, Object> maps = new HashMap<>();System.out.println("图片获取~~~");System.out.println("图片获取成功~");return maps;}}

实现效果。
了解到中括号中添加变量为es6中添加的新语法特性，学无止境~~

微信小程序动画渐入以及动态存值setdata问题相关推荐

微信小程序动画之圆形进度条
微信小程序动画之圆形进度条上图: 代码: js: //获取应用实例 var app = getApp()var interval; var varName; var ctx = wx.createC ...
微信小程序动画(七)：让页面动起来
本文默认读者已具备小程序基本动画api,如不了解可先阅读相关的详细介绍文章: 微信小程序动画(一):样式微信小程序动画(二):旋转微信小程序动画(三):缩放微信小程序动画(四):平移微信小程序 ...
微信小程序动画执行一次问题
微信小程序动画执行一次解决方法简单总结一下微信动画的实现及执行步骤(更新data使用的方式和vue一样直接this.data=""). const anim = wx.creat ...
微信小程序动画效果,小程序animation动画
微信小程序动画效果最近一直在做小程序开发,在官方文档中无意间看到过渡动画效果,我就有点小激动,用每一个开发框架的时候我都最先研究动画和过渡闲来无事写了一个小demo <!--wxml代码-- ...
微信小程序--动画animation
微信小程序--动画animation 一. 获取需要实现动画效果的元素 1. 微信小程序获取元素节点: 2. 合适的生命周期调用二.动画 1. 创建动画 2. 监听动画 3. 动画循环播放一. 获 ...
mpvue微信小程序动画_mpvue 与微信小程序的火花
介绍项目介绍 WeScale 定位为音乐训练小程序,初期规划了基础音阶的三个训练,以及他们的镜像模式. 数字简谱字母简谱数字简谱对字母简谱后期看情况更新追加其他训练. 产品展示扫描下方小程序 ...
微信小程序突然多了好多动态_让微信小程序的登陆页面有云朵悬浮的动态效果...
微信小程序目前的火热程度相信不用多言,尤其是近期微信团队开发小程序很多之前被诟病的功能:模糊搜索,附近小程序等.最近有网友利用空余时间用小程序实现了个动态的登录页效果,所以下面我们51小程序就吧这篇文 ...
微信小程序--云开发仿QQ动态发布（发布内容、图片）
前言微信小程序的云开发非常适合初级开发者,特别是对传统后端不是了解的开发者非常友好,我们只需要根据开发文档查找对应的函数即可(当然,微信开发文档坑是非常的多啊,一定要小心!) 下面就用云开发做一个类 ...
微信小程序动画无限循环掉花
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 动画效果源码 <block wx:if="{{donghu ...

微信小程序动画渐入以及动态存值setdata问题

微信小程序动画渐入以及动态存值setdata问题

微信小程序动画渐入以及动态存值setdata问题相关推荐

最新文章

热门文章