微信小程序-通知滚动小提示

立即下载用AI写一个

发布时间：2018-09-13

26人 | 浏览：9858次 | 收藏 |

技术：微信小程序

概述

我们在学习微信小程序或者做项目时，应该会遇到滚动通知效果情况，那么这个滚动通知功能我们应该怎么编写呢？今天我们说下微信小程序滚动通知效果的实现，今天我们就分享这样的小教程。希望对大家有所帮助

详细

#### 一、前期准备工作
软件环境：微信开发者工具
官方下载地址：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html
##### 1、基本需求。
- 我们在学习微信小程序或者做项目时，应该会遇到滚动通知效果情况，那么这个滚动通知功能我们应该怎么编写呢？

- 今天我们说下微信小程序滚动通知效果的实现，今天我们就分享这样的小教程。希望对大家有所帮助

##### 2、案例目录结构
![](http://www.demodashi.com/contentImages/image/20180904/fcqyj2X6LvOu0ZID937.png)

#### 二、程序实现具体步骤
##### 1.滚动通知1的index.wxml代码
```
<view> 显示完后再显示</view>
<view class="example">
  <view class="marquee_box">
    <view class="marquee_text" style="{{orientation}}:{{marqueeDistance}}px;font-size: {{size}}px;">
      {{text}}
    </view>
  </view>
</view>
<view> 出现白边后即显示</view>
<view class="example">
  <view class="marquee_box">
    <view class="marquee_text" style="{{orientation}}:{{marqueeDistance2}}px;font-size: {{size}}px;">
      <text>{{text}}</text>
      <text wx:if="{{marquee2copy_status}}" style="margin-left:{{marquee2_margin}}px;">{{text}}</text>
    </view>
  </view>
</view>
```
##### 2.滚动通知1的index.wxss代码
```
.example {
  display: block;
  width: 100%;
  height: 100rpx;
}
.marquee_box {
  width: 100%;
  position: relative;
}
.marquee_text {
  white-space: nowrap;
  position: absolute;
  top: 0;
}
```
##### 3.滚动通知1的index.js逻辑代码

a.滚动通知1部分的功能实现
```
// pages/home/marquee/marquee.js
Page({
  data: {
    //略略略......
  },
  onShow: function () {
    // 页面显示
    var vm = this;
    var length = vm.data.text.length * vm.data.size;//文字长度
    var windowWidth = wx.getSystemInfoSync().windowWidth;// 屏幕宽度
    vm.setData({
      length: length,
      windowWidth: windowWidth,
      marquee2_margin: length < windowWidth ? windowWidth - length : vm.data.marquee2_margin//当文字长度小于屏幕长度时，需要增加补白
    });
    vm.run1();// 水平一行字滚动完了再按照原来的方向滚动
    vm.run2();// 第一个字消失后立即从右边出现
  },
  run1: function () {
    var vm = this;
    var interval = setInterval(function () {
      if (-vm.data.marqueeDistance < vm.data.length) {
        vm.setData({
          marqueeDistance: vm.data.marqueeDistance - vm.data.marqueePace,
        });
      } else {
        clearInterval(interval);
        vm.setData({
          marqueeDistance: vm.data.windowWidth
        });
        vm.run1();
      }
    }, vm.data.interval);
  },
  run2: function () {
    var vm = this;
    var interval = setInterval(function () {
      if (-vm.data.marqueeDistance2 < vm.data.length) {
        // 如果文字滚动到出现marquee2_margin=30px的白边，就接着显示
        vm.setData({
          marqueeDistance2: vm.data.marqueeDistance2 - vm.data.marqueePace,
          marquee2copy_status: vm.data.length + vm.data.marqueeDistance2 <= vm.data.windowWidth + vm.data.marquee2_margin,
        });
      } else {
        if (-vm.data.marqueeDistance2 >= vm.data.marquee2_margin) { // 当第二条文字滚动到最左边时
          vm.setData({
            marqueeDistance2: vm.data.marquee2_margin // 直接重新滚动
          });
          clearInterval(interval);
          vm.run2();
        } else {
          clearInterval(interval);
          vm.setData({
            marqueeDistance2: -vm.data.windowWidth
          });
          vm.run2();
        }
      }
    }, vm.data.interval);
  }
})
```
#### 三、案例运行效果图
![](/contentImages/image/20180913/1vAsdAEDgxwGuWp61L4.gif)

![](/contentImages/image/20180913/RVFA0e4l3RTtynL2bE0.gif)
#### 四、总结与备注

暂无

本实例支付的费用只是购买源码的费用，如有疑问欢迎在文末留言交流，如需作者在线代码指导、定制等，在作者开启付费服务后，可以点击“购买服务”进行实时联系，请知悉，谢谢

感谢

手机上随时阅读、收藏该文章？请扫下方二维码

微信小程序-通知滚动小提示

概述

详细

相似例子推荐

评论

作者

评分详细

作者例子