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

朴灿烈づ我的快乐病毒、 2022-05-10 00:46 243阅读 0赞

> 代码地址如下：  
> [http://www.demodashi.com/demo/14044.html][http_www.demodashi.com_demo_14044.html]

#### 一、前期准备工作 ####

软件环境：微信开发者工具  
官方下载地址：[https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html][https_mp.weixin.qq.com_debug_wxadoc_dev_devtools_download.html]

##### 1、基本需求。 #####

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

##### 2、案例目录结构 #####

![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);
      }
    })

#### 三、案例运行效果图 ####

![1vAsdAEDgxwGuWp61L4.gif][]

![RVFA0e4l3RTtynL2bE0.gif][]

#### 四、总结与备注 ####

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

> 代码地址如下：  
> [http://www.demodashi.com/demo/14044.html][http_www.demodashi.com_demo_14044.html]

> 注：本文著作权归作者，由demo大师发表，拒绝转载，转载需要作者授权

[http_www.demodashi.com_demo_14044.html]: http://www.demodashi.com/demo/14044.html
[https_mp.weixin.qq.com_debug_wxadoc_dev_devtools_download.html]: https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html
[fcqyj2X6LvOu0ZID937.png]: /images/20220510/95bf5c656bbc4e0597fe9640795901a0.png
[1vAsdAEDgxwGuWp61L4.gif]: /images/20220510/b73d659739c74190881e51bef204a825.png
[RVFA0e4l3RTtynL2bE0.gif]: /images/20220510/64964e4eaddc4970b5d30d13c9924aaa.png