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


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 定义初始化数组函数
Sep 07 Javascript
JavaScript 事件冒泡简介及应用
Jan 11 Javascript
js中巧用cssText属性批量操作样式
Mar 13 Javascript
jQuery1.6 使用方法一
Nov 23 Javascript
js中string转int把String类型转化成int类型
Aug 13 Javascript
使用AngularJS中的SCE来防止XSS攻击的方法
Jun 18 Javascript
最通俗易懂的javascript变量提升详解
Aug 05 Javascript
jquery对table做排序操作的实例演示
Aug 10 jQuery
javascript实现QQ空间相册展示源码
Dec 12 Javascript
详解nuxt sass全局变量(公共scss解决方案)
Jun 27 Javascript
js实现多图和单图上传显示
Dec 18 Javascript
H5 js点击按钮复制文本到粘贴板
Nov 19 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+MySQL 手工注入语句大全 推荐
2009/10/30 PHP
php共享内存段示例分享
2014/01/20 PHP
php实现用已经过去多长时间的方式显示时间
2015/06/05 PHP
PHP中file_get_contents函数抓取https地址出错的解决方法(两种方法)
2015/09/22 PHP
PHP实现根据数组的值进行分组的方法
2017/04/20 PHP
PHP基于curl post实现发送url及相关中文乱码问题解决方法
2017/11/25 PHP
Yii框架实现对数据库的CURD操作示例
2019/09/03 PHP
jQuery.getScript加载同域JS的代码
2012/02/13 Javascript
JS将表单导出成EXCEL的实例代码
2013/11/11 Javascript
超详细的javascript数组方法汇总
2015/11/21 Javascript
JavaScript中eval函数的问题
2016/01/31 Javascript
js和jquery中获取非行间样式
2017/05/05 jQuery
Angular2搜索和重置按钮过场动画
2017/05/24 Javascript
vue.js组件之间传递数据的方法
2017/07/10 Javascript
Node.js对MongoDB进行增删改查操作的实例代码
2019/04/18 Javascript
微信小程序webview与h5通过postMessage实现实时通讯的实现
2019/08/20 Javascript
微信小程序 数据缓存实现方法详解
2019/08/26 Javascript
浅谈vue 多个变量同时赋相同值互相影响
2020/08/05 Javascript
[01:00:13]完美世界DOTA2联赛 LBZS vs Forest 第一场 11.07
2020/11/09 DOTA
Python自定义进程池实例分析【生产者、消费者模型问题】
2016/09/19 Python
python读取excel表格生成erlang数据
2017/08/26 Python
python利用标准库如何获取本地IP示例详解
2017/11/01 Python
Python基于贪心算法解决背包问题示例
2017/11/27 Python
pandas.DataFrame选取/排除特定行的方法
2018/07/03 Python
python使用pygame实现笑脸乒乓球弹珠球游戏
2019/11/25 Python
python 经典数字滤波实例
2019/12/16 Python
Python生成并下载文件后端代码实例
2020/08/31 Python
如何解决python多种版本冲突问题
2020/10/13 Python
HTML5 canvas基本绘图之文字渲染
2016/06/27 HTML / CSS
薇诺娜官方网上商城:专注敏感肌肤
2017/05/25 全球购物
俄罗斯达美乐比萨外送服务:Domino’s Pizza
2020/12/18 全球购物
写出程序把一个链表中的接点顺序倒排
2014/04/28 面试题
物业管理大学生个人的自我评价
2013/10/10 职场文书
公司司机岗位职责范本
2014/03/03 职场文书
《菜园里》教学反思
2014/04/17 职场文书
初中英语教师个人工作总结
2015/02/09 职场文书