原生微信小程序动态（横向，纵向）公告（广告）栏

怼烎@ 2022-12-05 00:53 570阅读 0赞

## 原生微信小程序 动态（横向，纵向）公告（广告）栏 ##

**先看一下动态效果**

![在这里插入图片描述][20200908153939772.gif_pic_center]  
**Y轴滚动公告的原理是`swiper`组件在页面中的Y轴滚动，属性`vertical`，其余属性也设置一下`autoplay circular interval="3000"`**

**X轴滚动的原理是，利用动画效果，将内容从右往左过渡过去**

**看下代码**  
**.wxss**

<view class="wrapY">
    	<swiper class="swiper_wrap" vertical autoplay circular interval="3000" >
    		<block class="block_wrap" wx:for="{ {items}}">
    			<swiper-item>
    				<view class="itemCon">{
       {item.title}}</view>
    			</swiper-item>
    		</block>
    	</swiper>
    </view>
    
    <view class='wrapX'>
    	<view class="wrapOut">
    		<view class="wrapInner">
    			<view class="contant">{
       {notice}}</view>
    		</view>
    	</view>
    </view>

**.wxss / .less**  
**记得在app.wxss里配置一下默认样式**

view, swiper, swiper-item, navigator { 
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }

.wrapY { 
        padding: 20rpx; .swiper_wrap { 
            width: 95vw;
            height: 60rpx;
            background-color: #FFEBDA;
            border-radius: 30rpx;
            padding-left: 40rpx;
            padding-right: 30rpx; .itemCon { 
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                line-height: 60rpx;
            }
        }
    }
    
    .wrapX { 
        padding: 20rpx; .wrapOut { 
            background-color: #FFEBDA;
            height: 60rpx;
            border-radius: 30rpx;
            overflow: hidden; .wrapInner { 
                overflow: hidden;
                // 这里不能用padding，会被当做盒子的一部分，文字到达一定部位之后，仍然不会隐藏
                margin-left: 40rpx;
                margin-right: 40rpx; .contant { 
                    line-height: 60rpx;
                    white-space: nowrap;
                    animation: remindMessage 13s linear infinite;
                    width: 100%;
                }
            }
        }
    
    }
    
    @keyframes remindMessage { 
        0% { 
            -webkit-transform: translateX(100%);
        }
    
        100% { 
            -webkit-transform: translateX(-180%);
        }
    }

.wrapY { 
      padding: 20rpx;
    }
    .wrapY .swiper_wrap { 
      width: 95vw;
      height: 60rpx;
      background-color: #FFEBDA;
      border-radius: 30rpx;
      padding-left: 40rpx;
      padding-right: 30rpx;
    }
    .wrapY .swiper_wrap .itemCon { 
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      line-height: 60rpx;
    }
    .wrapX { 
      padding: 20rpx;
    }
    .wrapX .wrapOut { 
      background-color: #FFEBDA;
      height: 60rpx;
      border-radius: 30rpx;
      overflow: hidden;
    }
    .wrapX .wrapOut .wrapInner { 
      overflow: hidden;
      margin-left: 40rpx;
      margin-right: 40rpx;
    }
    .wrapX .wrapOut .wrapInner .contant { 
      line-height: 60rpx;
      white-space: nowrap;
      animation: remindMessage 13s linear infinite;
      width: 100%;
    }
    @keyframes remindMessage { 
      0% { 
        -webkit-transform: translateX(100%);
      }
      100% { 
        -webkit-transform: translateX(-180%);
      }
    }

**.js**

Page({ 
      data: { 
        items: [
          { 
            title: "公告：由加莉由加莉由加莉由加莉由加莉由加莉由加莉由加莉由加莉"
          },
          { 
            title: "公告：真步真步真步真步真步真步真步真步真步真步真步真步真步真步"
          },
          { 
            title: "公告：镜华镜华镜华镜华镜华镜华镜华镜华镜华镜华镜华镜华镜华镜华"
          }
        ],
        notice: ""
      },
      onLoad: function (options) { 
        this.autoChangeX();
      },
      autoChangeX: function () { 
        // 定义初始第一条的内容
        let index = 0;
        const {  items } = this.data;
        this.setData({ 
          notice: items[0].title
        })
        index++;
        // 设置定时器，和动画时间间隔相等
        // 每隔13秒更换X轴公告的内容
        setInterval(() => { 
          if (index === items.length - 1) { 
            this.setData({ 
              notice: items[index].title
            })
            index = 0;
          } else { 
            this.setData({ 
              notice: items[index].title
            })
            index++;
          }
        }, 1000 * 13)
      }
    })

**代码gitee地址：https://gitee.com/chenminghuisir/wechat-applet-component  
[也可以点击这里直接跳转][Link 1]  
代码保存在仓库，PrincessConnect文件里**

[20200908153939772.gif_pic_center]: /images/20221123/acebed560c1a4ec683e622d093e52187.png
[Link 1]: https://gitee.com/chenminghuisir/wechat-applet-component