【微信小程序】公告-向上翻滚的消息栏

效果：

wxml

<view class='swiper-notice'>
  <text>公告</text>
  <image src='../../images/notice.png'></image>
  <swiper class='swiper-nav' vertical='true' autoplay='true' circular='true' interval='5000'>
    <block wx:for='{{noticeList}}' wx:key='unique'>
      <navigator url='{{item.url}}' hover-class='none'>
        <swiper-item>
          <view class='swiper-context'>{{item.context}}</view>
        </swiper-item>
      </navigator>
    </block>
  </swiper>
</view>

wxss

.swiper-notice {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin: 0 10rpx 0 10rpx;
}

.swiper-notice text {
  font-size: 28rpx;
  color: #bfbfbf;
}

.swiper-notice image {
  width: 50rpx;
  height: 50rpx;
}

.swiper-nav {
  height: 60rpx;
  width: 80vw;
  margin-left: 10rpx;
}

.swiper-nav swiper-item {
  display: flex;
  align-items: center;
}

.swiper-context {
  font-size: 28rpx;
  overflow: hidden;
  color: #bfbfbf;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 2rpx;
}

js

/**
 * 页面的初始数据
 */
data: {
  noticeList: [{
      url: "../tk/tk",
      context: "多地首套房贷利率上浮 热点城市渐迎零折扣时代 多地首套房贷利率上浮 热点城市渐迎零折扣时代"
    },
    {
      url: "../tk/tk",
      context: "悦如公寓三周年生日趴邀你免费吃喝欢唱"
    },
    {
      url: "../tk/tk",
      context: "你想和一群有志青年一起过生日嘛？"
    }
  ]
},

转载请注明出处！