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


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实现的在当前窗口中漂浮框的代码
Mar 15 Javascript
window.open的页面如何刷新(父页面)上层页面
Dec 28 Javascript
html超链接打开窗口大小的方法
Mar 05 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
Oct 24 Javascript
点击页面任何位置隐藏div的实现方法
Sep 05 Javascript
jQuery的deferred对象使用详解
Sep 25 Javascript
@ResponseBody 和 @RequestBody 注解的区别
Mar 08 Javascript
jQuery实现base64前台加密解密功能详解
Aug 29 jQuery
js实现数组内数据的上移和下移的实例
Nov 14 Javascript
node.js的http.createServer过程深入解析
Jun 06 Javascript
vue学习之Vue-Router用法实例分析
Jan 06 Javascript
vue中的v-model原理,与组件自定义v-model详解
Aug 04 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游戏编程25个脚本代码
2011/02/08 PHP
php微信开发之自定义菜单完整流程
2016/10/08 PHP
laradock环境docker-compose操作详解
2019/07/29 PHP
JSON扫盲帖 JSON.as类教程
2009/02/16 Javascript
js中substring和substr的详细介绍与用法
2013/08/29 Javascript
jscript读写二进制文件的方法
2015/04/22 Javascript
浅谈Javascript的静态属性和原型属性
2015/05/07 Javascript
jquery实现简单手风琴菜单效果实例
2015/06/13 Javascript
javascript性能优化之DOM交互操作实例分析
2015/12/12 Javascript
JS判断是否长按某一键的方法
2016/03/02 Javascript
Javascript小技能总结(推荐)
2016/06/02 Javascript
js与applet相互调用的方法
2016/06/22 Javascript
JavaScript 闭包详细介绍
2016/09/28 Javascript
webpack入门必知必会
2017/01/16 Javascript
Nodejs--post的公式详解
2017/04/29 NodeJs
nodejs 如何手动实现服务器
2018/08/20 NodeJs
详解vue的数据劫持以及操作数组的坑
2019/04/18 Javascript
微信小程序实现canvas分享朋友圈海报
2020/06/21 Javascript
js canvas实现俄罗斯方块
2020/10/11 Javascript
python数据清洗系列之字符串处理详解
2017/02/12 Python
python使用xpath中遇到:到底是什么?
2018/01/04 Python
浅谈python之高阶函数和匿名函数
2019/03/21 Python
Python3远程监控程序的实现方法
2019/07/15 Python
Pycharm导入anaconda环境的教程图解
2020/07/31 Python
详解Python 中的容器 collections
2020/08/17 Python
如何用Python徒手写线性回归
2021/01/25 Python
英国家居用品和家居装饰品购物网站:Cox & Cox
2019/08/25 全球购物
Skyscanner新西兰:全球领先的旅游搜索网站
2019/08/26 全球购物
力学专业毕业生自荐信
2013/11/17 职场文书
项目经理聘任书
2014/03/29 职场文书
大学生入党推荐书范文
2014/05/17 职场文书
学生会竞选演讲稿怎么写
2014/08/26 职场文书
避暑山庄导游词
2015/02/04 职场文书
2016年小学“我们的节日·中秋节”活动总结
2016/04/05 职场文书
使用 Apache Superset 可视化 ClickHouse 数据的两种方法
2021/07/07 Servers
Java工作中实用的代码优化技巧分享
2022/04/21 Java/Android