【微信小程序】实现垂直滚动消息、滚动广告，无限轮播

最新推荐文章于 2024-03-12 14:47:22 发布
最新推荐文章于 2024-03-12 14:47:22 发布
阅读量3.5k 收藏 18
点赞数 3
分类专栏： 微信小程序 文章标签： js 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhangshuny/article/details/119863425
版权

效果图

  1. 当消息是小于等于3行时，不轮播滚动，直接显示3条
    在这里插入图片描述

  2. 当消息大于3行时，轮播滚动(gif显示的问题，看起来不太流畅 )
    在这里插入图片描述

  3. 一列显示，大于3行，滚动显示
    在这里插入图片描述

  4. 一列显示，小于等于3行，静止效果

在这里插入图片描述
5. 可以通过代码动态修改颜色

let serviceData = {}
    serviceData.titlecolor = "#ffffff" //表头文字的颜色
    serviceData.titleBackground = "#FF7F00" //表头的背景
    let serviceArray = []
    let innerData1 = new Object()
    innerData1.color = "#999999" //表格文字颜色
    innerData1.title = "标题一"

在这里插入图片描述

实现原理

通过setInterval周期性执行的原理，周期性更新move，利用style="top:-{{move}}px"使view向上移动，当向上移动的距离是条目item的高度height的时候，表明一条item已经移除视野，这时候就应该在尾部添加一条数据，来实现
尾部添加数据的时间节点也是周期性的，再次利用setInterval来实现

      interval1 = setInterval(function () {
        that.setData({
          move: that.data.move + 1,
        })
      }, 18)
      interval2 = setInterval(function () {
        let detail = []
        for (let i = 1; i < that.data.lineArray.length; i++) {
          detail.push(that.data.lineArray[i])
        }
        detail.push(that.data.lineArray[0])
        that.setData({
          lineArray: detail,
          move: 0,
        })

      }, 684)
      //684/18 = 38(一行的高度)

两个interval的时间是什么关系呢，先确定interval1 的时间点是18（数值不同，滚动的速度不同），然后用18*item的高度，就是interval2的时间。

实现代码

wxml

<view class="notice-container" style="height:{{totalHeight}}px" catchtap="onNewProduct">
  <view class="notice-title-container">
    <block wx:for="{{titleArray}}" wx:key="index" data-index="{{index}}">
      <view class="notice-line-title-item" style="background:{{item.background}};color:{{item.color}}">
        {{item.value}}</view>
    </block>
  </view>
  <view class="notice-swiper" style="height:{{lineArray.length*38}}px">
    <view class="notice-position" style="top:-{{move}}px">
      <view class="notice-for" wx:for="{{lineArray}}" wx:key="index" data-index="{{index}}">
        <view class="notice-item-root-container">
          <view class="notice-item-container">
            <block wx:for="{{item}}" wx:key="index" data-index="{{index}}" wx:for-item="innerItem">
              <view class="notice-line-item-container" style="color:{{innerItem.color}}">
                <view class="notice-line-item">{{innerItem.value}}</view>
              </view>
            </block>
          </view>
          <view class="notice-item-divider"></view>
        </view>
      </view>
    </view>
  </view>
</view>

wxss

.notice-container {
  /* display: flex;
  flex-direction: column; */
  width: 702rpx;
  margin-left: 24rpx;
  background: #FFFFFF;
  border-radius: 16rpx;
  overflow: hidden;
}

.notice-title-container {
  width: 100%;
  height: 30px;
  display: flex;
  flex-direction: row;
}

.notice-line-title-item {
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: 500;
  height: 60rpx;
  line-height: 60rpx;
  color: #FFFFFF;
  height: 100%;

  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex: 1;
}
.notice-swiper {
  width: 100%;
  height: fit-content;
  float: left;
  overflow: hidden;
  position: relative;
}

.notice-position {
  width: 100%;
  float: left;
  position: absolute;
}

.notice-for {
  width: 100%;
  float: left;
  height: 38px;
}


.notice-item-root-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 38px;
}

.notice-item-container {
  width: 100%;
  height: 37px;
  display: flex;
  flex-direction: row;
}

.notice-item-divider {
  width: 640rpx;
  height: 1px;
  background: #f4f4f4;
  margin-left: 31rpx;
}
.notice-line-item-container {
  height: 100%;
  flex: 1;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  max-lines: 1;
  white-space: nowrap;
  justify-content: center;
}
.notice-line-item{
  margin-left: 6rpx;
  margin-right: 6rpx;
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
  width: fit-content;
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 100%;
  overflow: hidden;
  line-height: 24rpx;
  max-lines: 1;
  white-space: nowrap;
}

js

// example/notice/index.js
let interval1
let interval2
Page({

  /**
   * 页面的初始数据
   */
  data: {
    serviceData: null,
    titleArray: [],
    move: 0,
    searchBottom: 0,
    tabHeight: 0,
    totalHeight: 0
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let serviceData = {}
    serviceData.titlecolor = "#ffffff"
    serviceData.titleBackground = "#999999"
    let serviceArray = []
    let innerData1 = new Object()
    innerData1.color = "#999999"
    innerData1.title = "标题一"
    //3列6行
    // innerData1.value = ["列1、行1dfaddddddfadfad", "列1、行2", "列1、行3", "列1、行4", "列1、行5", "列1、行6"]
    //3列4行
    innerData1.value = ["列1行1dfaddddddfadfad", "列1、行2", "列1、行3", "列1、行4"]
    //3列3行
    // innerData1.value = ["列1行1dfaddddddfadfad", "列1、行2", "列1、行3"]
    let innerData2 = new Object()
    innerData2.color = "#333333"
    innerData2.title = "标题二"
    //3列6行
    // innerData2.value = ["列2、行1", "列2、行2", "列2、行3", "列2、行4", "列2、行5", "列2、行6"]
    //3列4行
    // innerData2.value = ["列2、行111111111111111111111", "列2、行2", "列2、行3", "列2、行4"]
    //3列3行
    innerData2.value = ["列2、行111111111111111111111", "列2、行2", "列2、行3"]
    let innerData3 = new Object()
    innerData3.color = "#d61515"
    innerData3.title = "标题三"
    //3列6行
    // innerData3.value = ["列3、行1", "列3、行2", "列3、行3", "列3、行4", "列3、行5", "列3、行6"]
    //3列4行
    // innerData3.value = ["列3、行1", "列3、行2", "列3、行3", "列3、行4"]
    //3列3行
    innerData3.value = ["列3、行1", "列3、行2","列3、行3"]
    serviceArray.push(innerData1)
    serviceArray.push(innerData2)
    serviceArray.push(innerData3)
    serviceData.array = serviceArray
    console.log(serviceData)
    //以上模拟服务端数据
    let lineArray = []
    let titleArray = []

    let count = serviceData.array[0].value.length
    let array = serviceData.array
    let itemColorArray = []
    array.forEach(e => {
      let itemData = {}
      itemData.value = e.title
      itemData.color = serviceData.titlecolor
      itemData.background = serviceData.titleBackground
      titleArray.push(itemData)
      itemColorArray.push(e.color)
    })
    let colmnIndex = 0
    for (let i = 0; i < count; i++) {
      let itemArray = []
      array.forEach(e => {
        let itemData = {}
        itemData.value = e.value[i]
        itemData.color = itemColorArray[colmnIndex]
        itemArray.push(itemData)
        colmnIndex++
      })
      colmnIndex = 0
      lineArray.push(itemArray)
    }
    this.setData({
      lineArray,
      titleArray,
    })
    if (lineArray.length > 3) {
      //当行数大于5的时候滚动轮播
      this.setData({
        totalHeight: 3 * 38
      })
      let that = this
      interval1 = setInterval(function () {
        that.setData({
          move: that.data.move + 1,
        })
      }, 18)
      interval2 = setInterval(function () {
        let detail = []
        for (let i = 1; i < that.data.lineArray.length; i++) {
          detail.push(that.data.lineArray[i])
        }
        detail.push(that.data.lineArray[0])
        that.setData({
          lineArray: detail,
          move: 0,
        })

      }, 684)
      //684/18 = 38(一行的高度)
    } else {
      this.setData({
        totalHeight: lineArray.length * 38+38
      })
    }

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
	
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    clearInterval(interval1)
    clearInterval(interval2)
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

需要注意的是：如果该页面使用在tabbar页面的时候，切换tab的时候需要在onHide停止轮询，在onshow中重新加载数据继续轮询，否则一直轮询是会耗电发烫的

川川~
关注
  • 3
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序实现无限滚动列表
10-17
主要为大家详细介绍了微信小程序实现无限滚动列表，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
微信小程序实现文字从右向左无限滚动
12-29
本文实例为大家分享了微信小程序实现文字无限滚动的具体代码，供大家参考，具体内容如下 布局页面wxml {{text}} <text style=margin-right:{{marquee_margin}}p
微信小程序文字上下无缝轮播（滚动效果）
最新发布
没落的博客
03-12 570
微信小程序文字上下无缝轮播的效果。
微信小程序——文字水平循环滚动
qq_43852612的博客
06-29 2120
微信小程序中实现一个文字水平循环移动
【微信小程序】view | scroll | swiper 的使用
qq_29145465的博客
11-05 794
summarize today class
java滚动字幕的实现的实训_微信小程序实现自上而下字幕滚动
weixin_34508682的博客
02-23 218
本文实例为大家分享了微信小程序实现字幕滚动的具体代码，供大家参考，具体内容如下需求：实现框内的文字自下而上的自动循环滚动。解决方案：第一种方法：经查询，最一开始实现字幕滚动是使用的微信小程序的swiper组件，后来发现，使用swiper组件实现的效果类似于轮播图，不符合需求。{{item.checkTime}} {{item.content}}第二种方法：使用微信小程序的动画来来实现字幕滚动。思路...
微信小程序轮播图标题跑马灯
Zmikoo学习之路
06-23 673
微信小程序做轮播图，轮播图下的标题如果不长不需要跑马灯效果，过长的无法显示全的则添加跑马灯效果 <swiper class="swiper" current="0" bindchange="onSlideChange"> <swiper-item wx:for='{{carouselImgArr}}' wx:key='index'> <image src='{{item.image}}' mode='heightF
【微信小程序】常用组件基本使用(view/scroll-view/swiper、text/rich-text、button/image)
苏凉.py的博客
06-30 1223
微信小程序常用组件学习！！
微信小程序实现文字从右往左无限滚动（类似公告）
热门推荐
林羽凡_CSDN专栏
09-19 1万+
布局页面wxml &lt;scroll-view class="container"&gt; &lt;view class="scrolltxt"&gt; &lt;view class="marquee_box"&gt; &lt;view class="marquee_text" style="transform: translat
微信小程序 滚动列表（无限滚动）
叶落无痕的博客
07-09 4840
效果图1.0 实现方式是利用小程序原声组件swiper，方向设置为纵向 ：vertical=‘true’设置同时显示的滑块数量：display-multiple-items=‘4’设置自动轮播：autoplay：‘true’. 话不所说，直接上代码： <!-- 底部排名 --> <view class='contentBottom'> &l...
微信小程序中 使用swiper 滑动切换一级、二级导航
m0_55969466的博客
02-09 2018
其中遇到一个大问题使我放弃了swiper的使用，其中就是swiper有一个固定高度不太好处理，最终使用了touch事件去处理触摸移动，之后会再写一篇文章记录。
微信小程序实现自上而下字幕滚动
12-29
本文实例为大家分享了微信小程序实现字幕...经查询，最一开始实现字幕滚动是使用的微信小程序的swiper组件，后来发现，使用swiper组件实现的效果类似于轮播图，不符合需求。 <view wx:for={{List}} wx:key=i
微信小程序tips消息滚动轮播
09-30
微信小程序tips消息滚动轮播（从右开始循环轮播）
17_微信小程序之抖音微视无限滑动视频列表自定义组件编写
gzx的博客
03-17 2488
微信小程序之抖音微视无限滑动视频列表自定义组件编写 一.先上效果图 看到上面，你可能首先会想到，使用swiper然后将swiper的circular设置为true，那么，想象一下，假如视频很多的情况下，1千个，甚至上万个的情况下，只要有一个swiper-item，就会渲染一个Video播放器，这样是非常耗费性能的，本文将在这个基础上做优化，大致思路就是，不管我们的数据有多少条，我们都只渲染3个swiper-item，再配合swiper的切换，切换swiper-item的内容实现复用 二.swiper实现循
七天速成小程序--喜马拉雅
weixin_33798152的博客
06-13 442
很多新手都喜欢一个人完成项目，从项目的规划、搭建，到实施、debug、验收，一整套流程都是自己纯手完成，当然，对于提高自己的整体开发能力和自适应能力很有帮助。ok,不废话，下面开始介绍小白如何快速完成一个微信小程序。 首先喜马拉雅App比较大，这里只完成部分重要功能。。。 本文章使用的是以喜马拉雅电台App防成微信小程序的栗子。 您可以从这篇文...
如何用vue写一个文字消息轮播列表(纯前端实现)
修仙程序员的博客
11-27 8547
效果展示 2
微信小程序中，怎么设置（通知公告）【向左一直滚动】的效果
weixin_50450473的博客
07-29 1350
index.wxml： 其中rich-text将获取到带标签的数据，解析成对应文本 <view class="example swiper_container"> <view class="marquee_box"> <view class="marquee_text" style="{{orientation}}:{{marqueeDistance}}px;font-size: {{size}}px;"> <view class=..
android怎么实现消息轮播,Android简单实现轮播
weixin_34549023的博客
05-29 418
先上效果图 一、build.gradle(Module:app)添加依赖compile 'com.jude:rollviewpager:1.4.6'二、XML中添加布局(总布局最上边加上xmlns:app…… )xmlns:app="http://schemas.android.com/apk/res-auto"android:id="@+id/vp_roll"android:layout_wid...
微信小程序简单实现类似饿了么,美团文字公告告示垂直循环滚动效果
系咩的个人收藏博客
04-20 3122
首先先来看下效果图 一开始的时候是打算自己用animation自己写出这样的一个动画效果，后面写完了，ui小姐姐看过后觉得十分不满意。 其实自己也觉得不太满意， 效果不太好，可能是自己功夫不到家啊，哈哈。   那么只能重新再搞搞呗 ，想到微信小程序组件里面有一个swiper组件。 既然能用来滚动轮播图为什么不能拿来滚动文字呢，细看确实有垂直滚动的功能， 马上拿来试试，最后弄完发现只...
微信小程序scroll-view横向滚动indicator
07-11
在微信小程序的 scroll-view 组件中，如果你想要实现横向滚动时显示 indicator（即滚动条），可以通过设置 scroll-view 组件的属性来实现。 首先，你可以在 scroll-view 组件上设置一个自定义的 class 名称，例如 "scroll-view-class"。然后，在对应的样式文件中，使用该 class 名称来定义滚动条的样式。 示例代码如下所示： 在 wxml 文件中： ```html <scroll-view class="scroll-view-class" scroll-x="true"> <!-- 横向滚动的内容 --> </scroll-view> ``` 在 wxss 文件中： ```css .scroll-view-class::-webkit-scrollbar { width: 6px; /* 设置滚动条宽度 */ height: 6px; /* 设置滚动条高度 */ } .scroll-view-class::-webkit-scrollbar-thumb { background-color: #999; /* 设置滚动条颜色 */ border-radius: 3px; /* 设置滚动条圆角 */ } .scroll-view-class::-webkit-scrollbar-track { background-color: #f5f5f5; /* 设置滚动条背景色 */ } ``` 通过上述代码，你可以自定义滚动条的样式，包括宽度、高度、颜色和背景色等。当设置了 scroll-x 属性为 true 后，scroll-view 组件会横向滚动，并显示自定义的滚动条。 注意：上述代码中的样式是基于 WebKit 内核的浏览器，适用于微信小程序。在其他平台上的滚动条样式可能有所不同。 希望这个回答能够帮助到你！如果还有其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值