小程序两种滚动公告栏的实现方法


Posted in Javascript onSeptember 17, 2019

先上效果图:

小程序两种滚动公告栏的实现方法

小程序两种滚动公告栏的实现方法

横向滚动栏实现:
网上的几种方案或多或少都有一些问题:
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="/assets/images/app.png" style="width:{{widthrpx}}rpx" bindload="imageLoad"></image> -->
  <text class="more">更多应用></text>
 </view>
</view>

// wxss
.notice {
 display: flex;
 align-content: center;
 justify-content: space-between;
 padding: 10rpx 25rpx;
 background: #f1f1f1;
}

.left {
 display: flex;
 align-items: center;
}

.voice {
 margin-right: 5rpx;
 margin-top: 2rpx;
 color: #fa6016;
}

.left-box {
 position: relative;
 display: flex;
 align-items: center;
}

.left-text {
 position: absolute;
 left: 0;
 width: 40rpx;
 height: 100%;
 background: linear-gradient(to left,rgba(241,241,241,0),rgba(241,241,241,1));
 z-index: 99;
}

.right-text {
 position: absolute;
 right: -1rpx;
 width: 40rpx;
 height: 100%;
 background: linear-gradient(to left,rgba(241,241,241,1),rgba(241,241,241,0));
 z-index: 99;
}

.content-box {
 overflow: hidden;
 width: 350rpx;
}

.content-text {
 color: #5e5e5e;
 white-space: nowrap;
 font-size: 28rpx;
}

.right {
 display: flex;
 align-items: center;
}

.app {
 height: 48rpx;
}

.more {
 margin-left: 5rpx;
 color: #aaa;
 font-size: 32rpx;
}

// js
 data: {
  text: "1.【评分标准】页可以查看不同年龄段的评分标准,通过首页选择对应的性别、类别和年龄。2.【单项成绩】页包含了详细的单项打分情况及成绩雷达图,直观地看出自己的弱项和强项。",
  animation: null,
  timer: null,
  duration: 0,
  textWidth: 0,
  wrapWidth: 0
 },
 onShow() {
  this.initAnimation(this.data.text)
 },
 onHide() {
  this.destroyTimer()
  this.setData({
   timer: null
  })
 },
 onUnload() {
  this.destroyTimer()
  this.setData({
   timer: null
  })
 },
destroyTimer() {
  if (this.data.timer) {
   clearTimeout(this.data.timer);
  }
 },
 /**
  * 开启公告字幕滚动动画
  * @param {String} text 公告内容
  * @return {[type]} 
  */
 initAnimation(text) {
  let that = this
  this.data.duration = 15000
  this.data.animation = wx.createAnimation({
   duration: this.data.duration,
   timingFunction: 'linear'  
  })
  let query = wx.createSelectorQuery()
  query.select('.content-box').boundingClientRect()
  query.select('#text').boundingClientRect()
  query.exec((rect) => {
   that.setData({
    wrapWidth: rect[0].width,
    textWidth: rect[1].width
   }, () => {
    this.startAnimation()
   })
  })
 },
 // 定时器动画
 startAnimation() {
  //reset
  // this.data.animation.option.transition.duration = 0
  const resetAnimation = this.data.animation.translateX(this.data.wrapWidth).step({ duration: 0 })
  this.setData({
   animationData: resetAnimation.export()
  })
  // this.data.animation.option.transition.duration = this.data.duration
  const animationData = this.data.animation.translateX(-this.data.textWidth).step({ duration: this.data.duration })
  setTimeout(() => {
   this.setData({
    animationData: animationData.export()
   })
  }, 100)
  const timer = setTimeout(() => {
   this.startAnimation()
  }, this.data.duration)
  this.setData({
   timer
  })
 },

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 */

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
键盘 keycode的值 javascript时触发事件时很有用的要素
Nov 02 Javascript
JQuery入门——用映射方式绑定不同事件应用示例
Feb 05 Javascript
根据选择不同的下拉值出现相对应的文本输入框
Aug 01 Javascript
xmlhttp缓存清除的2种解决方法
Dec 13 Javascript
浅谈JavaScript实现面向对象中的类
Dec 09 Javascript
jquery实现经典的淡入淡出选项卡效果代码
Sep 22 Javascript
基于javascript实现文字无缝滚动效果
Mar 22 Javascript
解析Javascript单例模式概念与实例
Dec 05 Javascript
利用Javascript裁剪图片并存储的简单实现
Mar 13 Javascript
浅谈node中的exports与module.exports的关系
Aug 01 Javascript
浅谈react受控组件与非受控组件(小结)
Feb 09 Javascript
JavaScript实现小球沿正弦曲线运动
Sep 07 Javascript
Vue Extends 扩展选项用法完整实例
Sep 17 #Javascript
react native 仿微信聊天室实例代码
Sep 17 #Javascript
Vue 自定义指令功能完整实例
Sep 17 #Javascript
JS扁平化输出数组的2种方法解析
Sep 17 #Javascript
JS代码屏蔽F12,右键,粘贴,复制,剪切,选中,操作实例
Sep 17 #Javascript
uni app仿微信顶部导航条功能
Sep 17 #Javascript
layui 关闭open弹出框 刷新table表格页面的方法
Sep 16 #Javascript
You might like
《神奇女侠:血脉》神力女超人大战犯罪公司
2020/04/09 欧美动漫
php通过文件头检测文件类型通用代码类(zip,rar等)
2010/10/19 PHP
PHP APC缓存配置、使用详解
2014/03/06 PHP
JavaScript 页面编码与浏览器类型判断代码
2010/06/03 Javascript
使用闭包对setTimeout进行简单封装避免出错
2013/07/10 Javascript
JS如何将UTC格式时间转本地格式
2013/09/04 Javascript
js单例模式详解实例
2013/11/21 Javascript
js 限制input只能输入数字、字母和汉字等等
2013/12/18 Javascript
JavaScript中对象property的读取和写入方法介绍
2014/12/30 Javascript
JavaScript通过setTimeout实时显示当前时间的方法
2015/04/16 Javascript
javascript实现鼠标放上后下边对应内容变换的效果
2015/08/06 Javascript
简单理解vue中track-by属性
2016/10/26 Javascript
JS实现给对象动态添加属性的方法
2017/01/05 Javascript
基于Bootstrap 3 JQuery及RegExp的表单验证功能
2017/02/16 Javascript
vue缓存的keepalive页面刷新数据的方法
2019/04/23 Javascript
JavaScript判断浏览器运行环境的详细方法
2019/06/30 Javascript
微信小程序实现锚点跳转
2020/11/23 Javascript
Python使用修饰器执行函数的参数检查功能示例
2017/09/26 Python
python实现在IDLE中输入多行的方法
2018/04/19 Python
Python 创建空的list,以及append用法讲解
2018/05/04 Python
利用Tensorboard绘制网络识别准确率和loss曲线实例
2020/02/15 Python
解决安装新版PyQt5、PyQT5-tool后打不开并Designer.exe提示no Qt platform plugin的问题
2020/04/24 Python
python爬虫---requests库的用法详解
2020/09/28 Python
细说CSS3中的选择符
2008/10/17 HTML / CSS
执行总经理岗位职责
2014/02/03 职场文书
2014年班主任自我评价范文
2014/04/23 职场文书
大队干部竞选演讲稿
2014/04/28 职场文书
公司经理任命书
2014/06/05 职场文书
小学综合实践活动总结
2014/07/07 职场文书
关于青春的演讲稿500字
2014/08/22 职场文书
绿色环保家庭事迹材料
2014/08/31 职场文书
工作证明范本(2篇)
2014/09/14 职场文书
学校机关党总支领导班子整改工作方案
2014/10/26 职场文书
六年级作文之关于梦
2019/10/22 职场文书
html+css合并表格边框的示例代码
2021/03/31 HTML / CSS
Java8中Stream的一些神操作
2021/11/02 Java/Android