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


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 相关文章推荐
Jquery iframe内部出滚动条
Feb 11 Javascript
JS 去前后空格大全(IE9亲测)
Jul 15 Javascript
简单的Jquery全选功能
Nov 07 Javascript
JavaScript事件委托技术实例分析
Feb 06 Javascript
详解jQuery中的元素的属性和相关操作
Aug 14 Javascript
详解JavaScript设计模式开发中的桥接模式使用
May 18 Javascript
通用无限极下拉菜单的实现代码
May 31 Javascript
Angular的Bootstrap(引导)和Compiler(编译)机制
Jun 20 Javascript
详解webpack-dev-middleware 源码解读
Mar 23 Javascript
vue引入静态js文件的方法
Jun 20 Javascript
vant时间控件使用方法详解
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 处理上百万条的数据库如何提高处理查询速度
2010/02/08 PHP
PHP和JAVA中的重载(overload)和覆盖(override) 介绍
2012/03/01 PHP
教你如何用php实现LOL数据远程获取
2014/06/10 PHP
微信公众号点击菜单即可打开并登录微站的实现方法
2014/11/14 PHP
简单解析PHP程序的运行流程
2016/06/23 PHP
学习ExtJS border布局
2009/10/08 Javascript
IE6下js通过css隐藏select的一个bug
2010/08/16 Javascript
Javascript面象对象成员、共享成员变量实验
2010/11/19 Javascript
jquery一句话全选/取消全选
2011/03/01 Javascript
js使用函数绑定技术改变事件处理程序的作用域
2011/12/26 Javascript
jquery实现上下左右滑动的方法
2015/02/09 Javascript
jQuery鼠标事件汇总
2015/08/30 Javascript
深入探讨前端框架react
2015/12/09 Javascript
Javascript数组循环遍历之forEach详解
2016/11/07 Javascript
jQuery Ajax向服务端传递数组参数值的实例代码
2017/09/03 jQuery
AngularJS实现的select二级联动下拉菜单功能示例
2017/10/25 Javascript
纯js封装的ajax功能函数与用法示例
2018/05/14 Javascript
Python之日期与时间处理模块(date和datetime)
2017/02/16 Python
django orm 通过related_name反向查询的方法
2018/12/15 Python
用pyqt5 给按钮设置图标和css样式的方法
2019/06/24 Python
Python+opencv 实现图片文字的分割的方法示例
2019/07/04 Python
Python将string转换到float的实例方法
2019/07/29 Python
Python实现PyPDF2处理PDF文件的方法示例
2019/09/25 Python
Python基于pyecharts实现关联图绘制
2020/03/27 Python
澳大利亚女士时装在线:Rockmans
2018/09/26 全球购物
高中校园广播稿
2014/01/11 职场文书
护士自我评价范文
2014/01/25 职场文书
乡镇四风对照检查材料
2014/08/31 职场文书
婚礼证婚人演讲稿
2014/09/13 职场文书
小学生安全教育广播稿
2014/10/20 职场文书
门卫管理制度范本
2015/08/05 职场文书
环保建议书作文300字
2015/09/14 职场文书
2016教师校本培训心得体会
2016/01/08 职场文书
创业计划书之闲置物品置换中心
2019/12/25 职场文书
php TP5框架生成二维码链接
2021/04/01 PHP
关于python中readlines函数的参数hint的相关知识总结
2021/06/24 Python