微信小程序中实现获奖名单滚动播放

使用小程序的swiper组件

<swiper class="swiperBox" vertical="true" autoplay="true" circular="true" interval="2000" display-multiple-items='1'><block wx:for-index="index" wx:for='{{list}}'><swiper-item><view class='swiperItem'><view>{{item.time}}分钟前</view><view>{{item.nickName}}获得了</view><view>{{item.reward}}元红包</view></view></swiper-item></block>
</swiper>

css

.swiperBox{width: calc(100% - 200rpx);height: 50rpx;float: left;margin-top: 30rpx;
}
.swiperItem{display: flex;flex-direction: row;
}

ok，完成，看看效果

微信小程序中实现获奖名单滚动播放相关推荐

上传声音微信小程序_图文详解微信小程序中调用录音功能和音频播放的方法...
老规矩,先几张图. 1.为了进来看得清楚.刚开始没有加载音频列表.代码往前挪一挪即可. 2.按住录音按钮的时候会出现麦克风.中间的麦克风是个帧动画. 其实就是用js控制图片显示隐藏.没啥好说的.这里 ...
微信小程序setinterval_微信小程序中setInterval的使用方法
微信小程序中setinterval的使用方法看了下小程序的画布功能,简单的使用了一下,用蹩脚的逻辑做了个 "弹啊弹,弹走鱼尾纹的小球",一起来看下吧.过程不重要主要是画布的使用哦 ...
微信小程序中实现瀑布流布局和无限加载
瀑布流布局是一种比较流行的页面布局方式,最典型的就是Pinterest.com,每个卡片的高度不都一样,形成一种参差不齐的美感. 在HTML5中,我们可以找到很多基于jQuery之类实现的瀑布流布局插 ...
微信小程序：scroll-view制作横向滚动导航条特效
微信小程序:scroll-view制作横向滚动导航条特效一.scroll-view介绍微信小程序官方释义为:可滚动视图区域,目前一共有10几个属性,包括:scroll-x.scroll-y.scr ...
微信小程序中实现一个金额摇奖效果
有时小程序没有现成插件可用,本文结合一个数字滚动摇奖效果,谈谈微信小程序中一些动画实现的方式. 实例上要显示四位数字,根据后台返回金额,比如5.2元,处理成从00:00快速翻动到05:20的效果,处理 ...
在微信小程序中编写金额摇奖效果
有时小程序没有现成插件可用,本文结合一个数字滚动摇奖效果,谈谈微信小程序中一些动画实现的方式. 实例上要显示四位数字,根据后台返回金额,比如5.2元,处理成从00:00快速翻动到05:20的效果,处理 ...
微信小程序中如何实现省市区街道四级地址级联选择
大家好,我是雄雄. 前言微信小程序中支持省市区地址级联吗? 微信小程序中的地址级联最多支持到几级? 今天,我们就来看看,微信小程序中的地址级联的使用,以及一些坑-希望大家看完之后能避免踩坑啊. 省市 ...
微信小程序中的Page
微信小程序中的Page Page()定义在js文件中,Page() 函数用来注册一个页面. Page()函数接受一个 object 参数,其指定页面的初始数据.生命周期函数.事件处理函数等. obje ...
微信小程序中的省市区选择器
微信小程序中的省市区选择器的实现在一些小程序中我们不伐会用到市区选择器,那它是如何实现的,下面展示一下,效果图. 首先在wxml这个文件中用到picker这个组件,picker是从底部加载的滚动选择 ...

微信小程序中实现获奖名单滚动播放

微信小程序中实现获奖名单滚动播放相关推荐

最新文章

热门文章