home-skeleton.js 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. // components/local/homeSkeleton/homeSkeleton.js
  2. Component({
  3. /**
  4. * 组件的属性列表
  5. */
  6. options: {
  7. multipleSlots: true
  8. },
  9. properties: {
  10. isLoading: {
  11. type: Boolean,
  12. value: true,
  13. observer(newVal) {
  14. if(newVal) {
  15. var animation= wx.createAnimation({}) //创建一个动画实例
  16. animation.opacity(1).step({
  17. duration:0
  18. });
  19. this.setData({
  20. showpic:animation.export(),
  21. hidden:true
  22. });
  23. return;
  24. }
  25. this.skeletonVis();
  26. }
  27. },
  28. },
  29. /**
  30. * 组件的初始数据
  31. */
  32. data: {
  33. hidden:true
  34. },
  35. /**
  36. * 组件的方法列表
  37. */
  38. methods: {
  39. skeletonVis() {
  40. var animation= wx.createAnimation({}) //创建一个动画实例
  41. animation.opacity(0).step({
  42. duration:500
  43. });
  44. // this.setData({
  45. // showpic:animation.export(),
  46. // });
  47. setTimeout(() => {
  48. this.setData({
  49. showpic:animation.export(),
  50. },() => {
  51. setTimeout(() => {
  52. this.setData({
  53. hidden:false,
  54. })
  55. }, 500);
  56. });
  57. }, 500);
  58. }
  59. }
  60. })