Small animation and dynamic storage setdata problem
If you want to make multiple elements in the WeChat applet one by one, the effect will be similar to the following:
First, refer to the contents of the API animation part of the development document.
Developing Document API - Animation
Create animation execution functions
animationShow: function (){
//Creating Animation Objects
this.animation = wx.createAnimation({
duration: 2000,//Animation execution time
timingFunction: 'ease',//The animation starts at a low speed, then speeds up and slows down before the end.
delay:delay//delay time
});
//Here is the content of animation execution - - Transparency changes to 1 - Y axis displacement to 0
this.animation.translateY(0).opacity(1).step();
this.setData({
//[] - --- Include variables in middle brackets, otherwise resolve as page element names
//Here animation is the corresponding element in the bound xml
//(Here animation is similar to a string, not a variable -- like the key-value pairs stored in Map)
animation1: this.animation.export()
})
}
The front page is:
<! - Animation = "{animation 1}" is the animation for which it is bound, and the key is animation 1 (the value of setData at js is this.animation.export()-->
<!-wx: for="{{list}" is a set of background elements that are printed circularly.
<view class= "init" wx:for= "{{list}}" animation= "{{animation1}}" > Name: {{item}}</view>
And we need to add css style to it first, let it hide, that is, y axis - 80px, transparency set to 0:
.init {
opacity: 0;
transform:
translateY(-80px)
}
Background data is imported, and SpringBook framework is used to build the backstage here.
/**
* Widget Call Test
* @return
*/
@ResponseBody
@RequestMapping("getUser")
public Map<String, Object> getUser(){
System.out.println("The applet is calling.");
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("A small program call is completed.");
return map;
}
The front desk uses js to call wx.request() for background access.
Attention should be paid here to:
The specific method of invoking request refers to the official documentation: API network
houduanButton1:function(){
var that = this;
var animationIN = this.animationShow()；
/**
*Network Request Part - Get the Background list and Pass it into the data in the page
**/
wx.request({
url: 'http://localhost:8080/getUser',
method:'GET',
header: {
'content-type': 'application/json' // Default value
},
success:function(res){
var list = res.data.list;
if(list == null){
var result = "Data acquisition failure";
wx.showToast({
title: result,
icon:'loading',
duration:2000
})
}else{
result = "Data Acquisition Success!!";
//Display the result - --- the tick in gif
x.showToast({
title: result,
icon: 'success',
duration: 2000
})
that.setData({
list:list//Transmit data
});
}
}
})
},
At this time, there is no dynamic effect. Considering that the elements need to be gradually introduced, a delay value should be given to them:
Reference resources
Modify the code:
After amendment:
xml:
<!--pages/test/test.wxml-->
<button class="init"bindtap='houduanButton1'animation="{{animation1}}">Click on the Initiation Request</button>
<view class="init" wx:for="{{list}}" animation="{{animationlist[index]}}">
//Name: {{item}}
</view>
<input type="text" class="houduanTab_input" placeholder="Please enter what you want to query." bindinput='houduanTab_input'animation="{{animation1}}"></input>
<button class="init"bindtap='houduanButton2'animation="{{animation1}}">query</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({
/**
* Initial data of pages
*/
data: {
imgUrls:"",
indicatorDots: false,
autoplay: true,
interval: 5000,
duration: 1000,
animation1: "",
animationlist: "",
list:""
},
/**
* Animation implementation
*/
animationShow: function (animationname,delay){
//var animation1 = this.data.animation1;
console.log(animationname)//Input Name - String
//Creating Animation Objects
this.animation = wx.createAnimation({
duration: 2000,//Animation execution time
timingFunction: 'ease',//The animation starts at a low speed, then speeds up and slows down before the end.
delay:delay//delay time
});
this.animation.translateY(0).opacity(1).step();
this.setData({
//[] - ----- Include variables in middle brackets or resolve them as page element names
[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' // Default value
},
success:function(res){
//console.log(res.data);
var list = res.data.list;
if(list == null){
var result = "Data acquisition failure";
wx.showToast({
title: result,
icon:'loading',
duration:2000
})
}else{
result = "Data Acquisition Success!!";
wx.showToast({
title: result,
icon: 'success',
duration: 2000
})
//console.log(list)
that.setData({
list:list
});
console.log(list)
var animationlist = that.data.animationlist;
//Call the custom function, this.
for (var i = 0; i < list.length; i++) {
that.animationShow("animationlist["+i+"]",i * 100)
};
}
}
})
//this.animationShow()
},
//Get the contents of the input box
houduanTab_input: function (e) {
this.setData({
word1: e.detail.value//Real-time input value
});
console.log(e.detail);
},
// houduanButton2 Network Request
houduanButton2: function () {
var that = this;
console.log(that);
wx.request({
url: 'http://localhost:8080/getWord',
data: {
word1: that.data.word1//Input value
},
method: 'GET',
header: {
'content-type': 'application/json' // Default value
},
success: function (res) {
console.log(res.data)//Print to console
var message = res.data.message;
if (message == null) {
var toastText = 'Data acquisition failure';
wx.showToast({
title: toastText,
icon: '',
duration: 2000
});
} else {
that.setData({
message: message
})
}
}
})
},
onLoad: function (options) {
var that = this;
//Call animation
this.animationShow('animation1',1);
wx.request({
url: 'http://localhost:8080/save',
method: 'GET',
header: {
'content-type': 'application/json' // Default value
},
success: function (res) {
console.log(res.data)//Print to console
var images = res.data.img;
if (images == null) {
var toastText = 'Data acquisition failure';
wx.showToast({
title: toastText,
icon: '',
duration: 2000
});
} else {
that.setData({
imgUrls :images
})
}
}
})
},
})
Realize the effect.