js:
list:[],
contentflag:false
 
this.animation = wx.createAnimation({
duration: 500,
timingFunction: 'linear',
})
 
//
var systemInfo = wx.getSystemInfoSync();
var px = systemInfo.windowWidth;
this.animation.translateX(-px).step()
this.setData({
  animation: this.animation.export()
});
 
//下拉刷新
bottomhd() {
  var _this = this;
  //调接口
},
//获取失败
err() {
  var _this = this;
  var systemInfo = wx.getSystemInfoSync();
  var px = systemInfo.windowWidth;
  this.animation.translateX(px).step();
  _this.setData({
    animation: this.animation.export(),
  })
},
 
if (res.data.data.list.length < 10) {
  _this.setData({
    contentflag: true
  });
}
 
var id = e.currentTarget.dataset.id;
 
wxml:
<view  animation="{{animation}}">
  <scroll-view scroll-y class='brandcontent' bindscrolltolower="bottomhd">
    <view wx:for="{{list}}" wx:for-index="index" wx:for-item="item" data-id="{{item.code}}" data-name="{{item.name}}" bindtap='getid'>{{item.name}}</view>
    <view wx:if="{{contentflag}}">已经到底了</view>
  </scroll-view>
</view>

微信小程序--动画animation的更多相关文章

  1. 微信小程序动画之圆形进度条

    微信小程序动画之圆形进度条 上图: js: //获取应用实例 var app = getApp() var interval; var varName; var ctx = wx.createCanv ...

  2. 微信小程序动画:高度渐变,left渐变

    今天在测试微信小程序动画的时候遇到了坑,需求是这样的点击时子元素从外部滑动回来,父元素的高度跟随子元素的高度改变. 实现子元素left为0并不复杂,但是改变父元素box的高度的时候却遇到了坑,因为是需 ...

  3. 微信小程序动画实现(API,css)

    微信小程序动画API实现 index.js clicktap:function(){ var Animation=wx.createAnimation({ duration: 2000, }) Ani ...

  4. 微信小程序动画技巧

    用微信小程序自带的wx.createAnimation api可创建动画,该动画效果相比css写的动画更流畅. 栗子与用法,见官网:https://mp.weixin.qq.com/debug/wxa ...

  5. 微信小程序动画之弹出菜单

    用微信小程序做了一个动画,效果如上图: 代码: js: Page({ data: { isPopping: false, animPlus: {}, animCollect: {}, animTran ...

  6. 如何实现微信小程序动画?添加到我的小程序动画实现详细讲解,轻松学会动画开发!附壁纸小程序源码下载链接

    为了让用户能尽可能多地使用小程序,也算是沉淀用户,现在很多小程序中,都有引导用户"添加到我的小程序"的操作提示,而且大多都是有动画效果.在高清壁纸推荐小程序首页,用户每次进入,都会 ...

  7. 微信小程序 --- 动画

    动画的基本使用: 旋转动画 缩放动画 偏移动画 倾斜动画 矩阵动画 动画API:wx.createAnimation(object) 示例:创建一个点击的动画 <view class=" ...

  8. 微信小程序——动画操作时,rpx 和 px 的转换计算。

    嫌长版本: var rpx = 10000; var systemInfo = wx.getSystemInfoSync(); var px = rpx / 750 * systemInfo.wind ...

  9. 微信小程序animation有趣的自定义动画

    这几天在看代码时遇到了一些问题:关于微信小程序的animation自定义动画自己没有系统的学习过 做动画需要我们将一个复杂的动作过程,拆解为一步一步的小节过程 微信中已经为我们写好了端口我们只需要实例 ...

随机推荐

  1. 下载安装ngnix

    在这个网站上进行下载,http://nginx.org/en/download.html,由于我的是windows系统 我下载解压后,打开文件夹里面看到ngix.exe,我去双击它,发现它就是一闪,后 ...

  2. iOS tableView分割线高度自定义

    1.系统自带的集中分割线的形式 myTableView.separatorStyle=UITableViewCellSeparatorStyleNone;(这个是去掉所有分割线)可以通过这个来设置 2 ...

  3. 获取China大陆IP段的范围

    这里有几个网站提供了大陆的IP段范围.别问我要这个列表干什么,我也不知道. http://www.ip2location.com/blockvisitorsbycountry.aspx老牌网站,国内很 ...

  4. latex之注释快捷键

    注释快捷键 ctrl+T:注释掉选中区域 ctrl_U:解除选中区域的注释

  5. [JLOI2011]不重复数字

    原题链接 题解 题目大意:给出N个数,要求把其中重复的去掉,只保留第一次出现的数.最后按顺序输出N <= 50000 然这题是个哈希的典型题目 HASH,我对于它的理解就是一个桶%一个数,当然并 ...

  6. 第8章 枚举类&注解

    8.枚举及注解 8.1 如何自定义枚举类 1课时 8.2 如何使用关键字enum定义枚举类 1课时 8.3 枚举类的主要方法 1课时 8.4 实现接口的枚举类 1课时 8-1 枚举类 枚举类入门 枚举 ...

  7. py-day2-4 python 集合

    # 集合是由 { ,} 组成 test = {1,2,8,9,7,5} print(test) {1, 2, 5, 7, 8, 9} # 集合的结果是 去重的,且排序是 无序的 test = {1,2 ...

  8. delphi字符串分割

    function GetLeft(sText, sepStr: string): string; var p: Integer; begin p := Pos(sepStr, sText); then ...

  9. 经典算法二分查找循环实现Java版

    二分查找 定义 二分查找(Binary Search)又称折半查找,它是一种效率较高的查找方法. 要求 (1)必须采用顺序存储结构 (2)必须按关键字大小有序排列 查找思路 首先将给定值K,与表中中间 ...

  10. js基础系列之【作用域】

    声明:形成本文的出发点仅仅是个人总结记录,避免遗忘,并非详实的教程:文中引用了经过个人加工的其它作者的内容,并非原创.学海无涯 什么是作用域? 作用域就是一套规则,用于确定在何处以及如何查找变量(标识 ...