开发必备:熟悉微信小程序组件开发

开发思路:如果只有一条数据,直接用css3关键帧动画;如果有多条数据,则在当前动画运动到一定时间的时候,将其数据替换掉,使之在视觉效果上有一个从下到上播放的状态。数组循环播放的状态是通过将当前播放元素置换到末尾实现,即通过数组元素删除插入方法将整个数组元素串成一个闭环。

本例是将跑马灯作为一个公共组件开发的,故代码展示为组件形式

目标UI:

wxml文件代码:

<view wx:if="{{lampData && lampData.length > 0}}" class="lamp-bg">
<view wx:if="{{showItem}}" class="lamp-content box box-lr box-align-center">
<image src="{{lampData[0].avatar}}" class="avatar" />
<view class="lamp-txt">{{lampData[0].desc}}</view>
</view>
</view>

wxss文件代码:

.lamp-bg {
width: 490rpx;
height: 56rpx;
background: #a50519;
border-radius: 30rpx;
overflow: hidden;
}
.lamp-content {
position: relative;
top: 60rpx;
left: 0;
animation: horseRunAnimate 2s linear infinite normal;
}
.avatar {
width: 44rpx;
height: 44rpx;
display: inline-block;
border-radius: 50%;
margin-left: 16rpx;
margin-top: 6rpx;
}
.lamp-txt {
font-size: 26rpx;
color: #fff;
display: inline;
margin-left: 6rpx;
position: relative;
top: -10rpx;
}
@keyframes horseRunAnimate {
0% {
position: relative;
top: 60rpx;
left: 0;
}
25% {
position: relative;
top: 0;
left: 0;
}
50% {
position: relative;
top: 0;
left: 0;
}
75% {
position: relative;
top: 0;
left: 0;
}
100% {
position: relative;
top: -60rpx;
left: 0;
}
}
 
json文件代码:
{
"component": true,
"usingComponents": {}
}

js代码:

let internal = '';
Component({
options: {
multipleSlots: true
},
properties: {
lampData: {
type: Array,
value: [{ avatar: '', text: 'hhhh' }, { avatar: '', desc: 'aaaa' }],
observer() {
this.startAnimate();
}
}
},
data: {
showItem: true
},
attached() {
this.setItemStatus();
},
pageLifetimes: { 
show() {
this.setData({
showItem: true
});
this.startAnimate();
},
hide() {
clearInterval(internal); // 组件所在页面隐藏时清除setInterval,是为了解决页面跳转后返回时setInterval带来的动画时差,在页面上bug提现为:两条数据更替时有跳动现象或者数据渲染延迟
this.setData({
showItem: false
});
}
},
methods: {
setItemStatus() {
if (this.data.lampData.length > 1) {
setTimeout(() => {
this.setData({
showItem: false
});
}, 1800); // 添加showItem属性值是为了解决两条数据更替是页面延迟渲染的问题                                                  
}
},
startAnimate() {
const initArr = this.data.lampData;
if (initArr.length > 1) { // 轮播总数大于1时,才执行数组首位删除并插入末尾操作
internal = setInterval(() => {
const firstEle = initArr[0];
initArr.shift();
initArr.push(firstEle);
this.setData({
lampData: initArr,
showItem: true
});
}, 2000);
}
}
}
});
 
引用该组件wxml文件代码片段:
<view class="horse-run-lamp">
<horserunlamp lampData="{{pageData.success_users}}"/>
</view>
 
引用该组件json文件代码片段:
{
"navigationBarTitleText": "test页面",
"usingComponents": {
"horserunlamp": "../../../../components/HoseRunLamp/index"
}
}

微信小程序动态数据跑马灯组件编写的更多相关文章

  1. 微信小程序动态生成保存二维码

    起源:最近小程序需要涉及到一些推广方面的功能,所以要写一个动态生成二维码用户进行下载分享,写完之后受益良多,特此来分享一下: 一.微信小程序动态生成保存二维码 wxml: <view class ...

  2. 微信小程序请求数据

    微信小程序请求数据,在页面展示,可以在onLoad生命周期中进行请求. 1.新建目录http,新建文件http.js 2.在js文件中暴露需要使用的变量 var baseUrl = 'http://1 ...

  3. 微信小程序之数据缓存

    关于缓存,举个示例,假定我不是通过微信授权登录的方式,小程序又是如何识别我登录后的身份呢???效果图: 这个功能我是通过缓存实现的. 关键核心代码如下: wx.setStorage({ key: 'u ...

  4. 微信小程序开放数据解密 AES-128-CBC 解密(C#版本)

    最近在开发小程序,需要跟微信服务端交互,微信敏感数据都有加密返回,需要在服务端接收进行解密后再返回给客户端小程序,今天就通过C# 进行数据的解密,官方下载下来是Node.C++.php等,就是没有C# ...

  5. 微信小程序——动态修改页面数据(和样式)及参数传递

    1.1.1动态修改页面数据 在小程序中我们经常要动态渲染数据,对于新手而言我们常常遇到修改的数据在控制台显示和页面显示不一致,因为我们用“=”修改数据的,这种是可以修改,但无法改变页面的状态的,还会造 ...

  6. 微信小程序基础之试图控件View、ScrollView、Swiper

    今天写一篇关于微信小程序视图控件的文章,主要是介绍界面的搭建和部分操作js交互功能的介绍,转载请注明出处,谢谢~ 首先显示首页结构.创建三个navigator,用来跳转页面: <!--index ...

  7. 微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示

    一.前言 项目中遇到的评分相关的需求其实还挺多.之前也写过网页中关于评分功能实现的文档.这次,是基于微信小程序开发而提炼出一个简单方便使用的方法,网页开发中同样可用.这次使用的还是字体,主要是字体这个 ...

  8. 20171018 微信小程序客户端数据和服务器交互

    -- 时常在想,怎么样才能把知识写的清晰,其实是我理解的不够清晰 微信小程序其实是一个客户端页面,也是需要和服务器交互才能体现数据. 1 --服务器搭建Web API :MVC4 中的一个模板, 如下 ...

  9. 【微信小程序】数据与界面UI不同步,不能直接操作Page.data

    问题:数据层与UI不同步 微信小程序也采用UI绑定数据源的形式,根据以前做WPF的经验,直觉上认为修改了数据层(Page.data)后,UI会自动更新,然而实验发现数据层修改后UI层未修改,导致数据层 ...

随机推荐

  1. 64.SHELL

    SHELL 1. crontab定时器 编辑使用crontab -e 一共6列,分别是:分 时 日 月 周 命令 查看使用crontab -l 删除任务crontab -r 查看crontab执行日志 ...

  2. Java开发--操作MongoDB

    http://www.cnblogs.com/hoojo/archive/2011/06/01/2066426.html介绍到了在MongoDB的控制台完成MongoDB的数据操作,通过前一篇文章我们 ...

  3. Node.js模块 加载笔记

    //核心模块就是Node.js标准API种提供的模块,如fs,http,net.vm等.官方提供,编译成二进制代码//核心模块拥有最高的加载优先级 //文件模块则是存储为单独的文件(或文件夹)的模块, ...

  4. Javascript Duff装置 循环展开(Javascript Loop unrolling Duff device)

    Javascript 中会用到for 循环,当要循环的数据记录很多的时候,可能会对性能产生很大影响.这时我们可以考虑展开for循环,这时就要用到Duff装置(Duff Device). 先来看一个小例 ...

  5. jQuery高级Ajax

    .load();加载远程的HTML文件代码,并插入到指定的DOM节点中.可以只传入一个参数,表示加载一个静态的HTML代码片段. $("#div1").load("loa ...

  6. 支付宝支付php的demo或sdk报错 Warning: openssl_sign() [function.openssl-sign]: Unknown signature algorithm. in

    最近在做支付宝支付,在本地测试一切正常,上传到服务器就遇到报错: Warning: openssl_sign() [function.openssl-sign]: Unknown signature ...

  7. 在vue中优雅地实现简单页面逆传值

    [需求] 要实现的需求很简单,页面从A -> B,用户在B触发操作,将一些数据带回到A页面,在网上找了好久也只看到有人问,但总找不到很好答案.要实现的效果图如下: [联想] 在 ios 开发中, ...

  8. 【原创】Linux基础之opensuse15

    装机 装机之后执行 sudo zypper ar -fc https://mirrors.aliyun.com/opensuse/distribution/leap/15.0/repo/oss ope ...

  9. 安装pytorch0.4.0

    参考了官网https://pytorch.org/previous-versions/中的说明 (jj1env) [ji@dev down_python0.4.0]$ pip install http ...

  10. 叙述 activemq 与spring 主题实现 小功能实现

    在上一篇文章里 我说到了 maven的配置  我现在直接说 xml配置 首先我先描述 生产者的信息 <?xml version="1.0" encoding="UT ...