先上效果图:
横向滚动栏实现:
网上的几种方案或多或少都有一些问题:
1.setData定时器更新text view的margin-left方法,由于setData的毫秒延时,动画播放起来一卡一卡;
2.纯CSS实现,keyframe等,无法实现循环播放的设置;
3.使用string.length*font-size的方法获取字符串像素长度,不够精确,多次循环播放后误差会累积变大。
我采用的animate动画方法,实测动画流畅,循环播放无误差。
横向滚动代码如下所示
// wxml <view class='notice'> <view class="left"> <text class='iconfont icon-labagonggao voice'></text> <view class="left-box"> <view class="left-text"></view> <view class='content-box'> <view class='content-text' animation="{{animationData}}"><text id="text">{{text}}</text></view> </view> <view class="right-text"></view> </view> </view> <view class="right" bindtap="goApp"> <!-- <image class="app" mode="aspectFit" src="/UploadFiles/2021-04-02/app.png">sipwer滚动方式代码如下所示
swiper默认为横向滚动,vertical为true,则纵向滚动
// wxml <!-- 公告 --> <text class='swiper-notice'>公告:</text> <swiper class='swiper-container' autoplay='true' vertical='true' circular='true' interval='2000'> <block wx:for='{{msgList}}'> <navigator url='/pages/notice/notice?title={{item.url}}' open-type='navigate'> <swiper-item> <view class='swiper-item'>{{item.title}}</view> </swiper-item> </navigator> </block> </swiper> <!-- 公告 end --> // wxss /* 公告start */ .swiper-notice { font-size: 28rpx; color: #fa6016; } .swiper-container { margin-left: 10rpx; width: 400rpx; height: 100%; } .swiper-item { position: absolute; top: 50%; transform: translateY(-50%); width: 100%; font-size: 28rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: 2rpx; } /* 公告end */以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年11月13日
2024年11月13日
- 米游币抽抽乐-原神专场现已开启!
- 黑鸭子2001《风情中国HQCD》[日本版][WAV+CUE]
- 陈杰洲1990-成人礼[滚石][WAV+CUE]
- MarkAanderud-HandsFree(2024)[24-44,1]FLAC
- 孙露《观心》1:1母盘直刻限量版[低速原抓WAV+CUE][361M]
- 钟志刚《汽车DJ玩主》[低速原抓WAV+CUE][1G]
- 张学友 《真爱》新曲+真正精选K2HD版[WAV+CUE][1G]
- 万芳.2018-.....那些美丽的相遇【何乐音乐】【WAV+CUE】
- 范晓萱.1996-甜蜜·眼泪国语合辑【福茂】【WAV+CUE】
- 陈崎凡.2024-CHEN【HAHAHAI】【FLAC分轨】
- 《过山车之星2》评测:世界补全后的过山车星球
- 《索尼克x夏特:世代重启》评测:找准方向再狂奔
- 原神5.2版本前瞻放出,烟谜主部落即将上线
- 群星《SAMPLER 绝对音感Vol. 1》[WAV+CUE][1.5G]
- 谭艳 《遗憾》2023头版[低速原抓WAV+CUE][1.1G]