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


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 相关文章推荐
javascript简单性能问题及学习笔记
Feb 04 Javascript
IE下通过a实现location.href 获取referer的值
Sep 04 Javascript
angularJS 中$attrs方法使用指南
Feb 09 Javascript
JavaScript操作Oracle数据库示例
Mar 06 Javascript
JavaScript中使用Object.prototype.toString判断是否为数组
Apr 01 Javascript
js判断文本框输入的内容是否为数字
Dec 23 Javascript
谈谈JavaScript的New关键字
Aug 26 Javascript
详解js中Json的语法与格式
Nov 22 Javascript
Vue使用mixins实现压缩图片代码
Mar 14 Javascript
解决ng-repeat产生的ng-model中取不到值的问题
Oct 02 Javascript
JS实现电话号码的字母组合算法示例
Feb 26 Javascript
浅析vue-router中params和query的区别
Dec 24 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
PHP 常用数组内部函数(Array Functions)介绍
2013/06/05 PHP
PHP入门教程之字符串处理技巧总结(转换,过滤,解析,查找,截取,替换等)
2016/09/11 PHP
PHP使用GD库输出汉字的方法【测试可用】
2016/11/10 PHP
详解关于php的xdebug配置(编辑器vscode)
2019/01/29 PHP
图片完美缩放
2006/09/07 Javascript
JS 控制非法字符的输入代码
2009/12/04 Javascript
jQuery 学习第七课 扩展jQuery的功能 插件开发
2010/05/17 Javascript
分享JavaScript获取网页关闭与取消关闭的事件
2013/12/13 Javascript
Javascript中设置默认参数值示例
2014/09/11 Javascript
详谈JavaScript内存泄漏
2014/11/14 Javascript
jquery利用命名空间移除绑定事件的方法
2015/03/11 Javascript
浅谈被jQuery抛弃的函数及替代函数
2015/05/03 Javascript
直接拿来用的页面跳转进度条JS实现
2016/01/06 Javascript
jQuery简单实现列表隐藏和显示效果示例
2016/09/12 Javascript
利用select实现年月日三级联动的日期选择效果【推荐】
2016/12/13 Javascript
搭建简单的nodejs http服务器详解
2017/03/09 NodeJs
Bootstrap 表单验证formValidation 实现远程验证功能
2017/05/17 Javascript
jQuery 同时获取多个标签的指定内容并储存为数组
2018/11/20 jQuery
js判断一个对象是数组(函数)的方法实例
2019/12/19 Javascript
Python使用MD5加密字符串示例
2014/08/22 Python
在Python的Django框架上部署ORM库的教程
2015/04/20 Python
Python常见格式化字符串方法小结【百分号与format方法】
2016/09/18 Python
python 基础教程之Map使用方法
2017/01/17 Python
python实现简单点对点(p2p)聊天
2017/09/13 Python
不知道这5种下划线的含义,你就不算真的会Python!
2018/10/09 Python
Python使用os.listdir()和os.walk()获取文件路径与文件下所有目录的方法
2019/04/01 Python
python绘制已知点的坐标的直线实例
2019/07/04 Python
tensorflow tf.train.batch之数据批量读取方式
2020/01/20 Python
Django Admin设置应用程序及模型顺序方法详解
2020/04/01 Python
python中sys模块是做什么用的
2020/08/16 Python
浅谈css3中的渐进增强和优雅降级
2017/12/01 HTML / CSS
纬创Java面试题笔试题
2014/10/02 面试题
工作证明格式及范本
2014/09/12 职场文书
事业单位考察材料范文
2014/12/25 职场文书
顶岗实习协议书
2015/01/29 职场文书
教你用python实现12306余票查询
2021/06/30 Python