如何设置微信群公告滚动

微信小程序实现上下滚动消息提醒，主要是利用swiper组件来实现，swiper组件在小程序中是滑块视图容器。

1.打开微信进入后，选择需要设置的微信群聊，点击右上角三个点的图标。

2.点击“群公告”进入。

3.在空白位置输入公告的文字内容，点击“完成”。

4.随后出现对话框，点击“发布”。

5.回到微信群内，就会出现公告文字内容仔顷，同时这段文字左下角出现升世灰色字“设为群待办”。

6.点击“设为群待办”，这样群内成员吵戚肢点击查看才算完成。

HBuilder X 2.2.2

安装后，从插件市场导搜备入，即可真机运行

vue

项目地址

github

uniapp插件市场

说明

插件分纳扒别用swiper实现(多端兼容)和css3动画实现(暂时只支持app)，可自行切换。

插件在uni-app编译模式下编写(已切换)。

默认为weex编译模式，在 manifest.json 的源码视图里配置是切换模式， manifest.json ->app-plus ->nvueCompiler 切换编译模式。

swiper在非App端内嵌video性能比较洞漏昌差，不建议导入过多视频。

项目效果

h5在线地址

写的时候发现网上没有好用的，要么过于复杂，要么不太实用，我就自己整了个简单的

直接上代码部分

//wxml部分

<swiper indicator-dots="true" indicator-color="green" indicator-active-color="red" autoplay="true" interval="5000" duration="1000" circular="true" vertical="true">

<swiper-item wx:for="{{images}}">

<image src="{{item}}" mode="scaleToFill"></image>

</swiper-item>

</swiper>

下面是js部分，大部分都是自动生成的函数，只要在data里面拦仔凳存放图片地址就行，其他的可以不用管

// pages/template/template.js

Page({

/**

* 页面的初始数据

*/

data: {

images: ["/pages/template/images/1.png","/pages/template/images/2.png","/pages/template/images/3.png","/pages/template/images/4.png"]

},

/**

* 生命周期函数--监听页面加载

*/简旅

onLoad: function (options) {

},

/**

* 生命周期函数--监听页面初次渲染完成

*/

onReady: function () {

},

/**

* 生命周期函数--监听页面显示

*/

onShow: function () {

},

/**

* 生命周期函数--监听页面隐藏

*/戚枣

onHide: function () {

},

/**

* 生命周期函数--监听页面卸载

*/

onUnload: function () {

},

/**

* 页面相关事件处理函数--监听用户下拉动作

*/

onPullDownRefresh: function () {

},

/**

* 页面上拉触底事件的处理函数

*/

onReachBottom: function () {

},

/**

* 用户点击右上角分享

*/

onShareAppMessage: function () {

}

})

效果图

iphone5表现效果

在这里插入图片描述

iphone 12/13 Pro Max表现效果

在这里插入图片描述

本人前端一般般，可能会有问题，仅供参考