微信小程序实现公告自动滚动效果

warning: 这篇文章距离上次修改已过244天,其中的内容可能已经有所变动。

<!-- 公告 start-->
<view class='notice'>
  <view class='notice-contain'>
    <text class="cuIcon-notificationfill text-red"></text>
    <view class="notice-containTitle">公告栏</view>
    <swiper class="tab-right" vertical="true" autoplay="true" circular="true" interval="2000" display-multiple-items='1'>
      <view class="right-item">
        <block wx:for="{{msgList}}">
          <swiper-item>
            <view class='content-item'>
              <view class="swiper-item text-red text-bold">{{item.title}}</view>
            </view>
          </swiper-item>
        </block>
      </view>
    </swiper>
  </view>
</view>
<!-- 公告 end -->
/* 公告栏 */
.notice {
  display: flex;
  justify-content: center;
  align-items: center;
  /* margin-top: 10rpx */
}

.notice-contain {
  box-shadow: 0px 1px 1px 1px rgba(202, 199, 199, 0.993);
  display: flex;
  flex-direction: row;
  background: #FFFFFF;
  width: 700rpx;
  height: 82rpx;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
}

.notice-containTitle {
  font-weight: bold;
  font-size: 32rpx;
  position: relative;
  /* top: 0; */
  left: 14rpx;
}

.notice-containTitle::after {
  position: absolute;
  top: -4rpx;
  left: 110rpx;
  content: "";
  display: block;
  background: #AAAAAA;
  width: 2px;
  height: 54rpx;
}

.tab-right {
  height: 55rpx;
  width: 80%;
  line-height: 55rpx;
  padding-left: 70rpx;
}

.swiper-item {
  font-size: 28rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 2px;
}
 msgList: [{
      title: "视频无水印解析免费无限次使用~"
    }, {
      title: "视频无水印解析免费无广告使用~"
    }]
版权声明 ▶ 本网站名称:我的学习笔记
▶ 本文链接:https://ooolo.net/article/257.html
▶ 本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长进行核实删除。
▶ 转载本站文章需要遵守:商业转载请联系站长,非商业转载请注明出处!!!

none
最后修改于:2023年07月04日 15:32

添加新评论

icon_mrgreen.pngicon_neutral.pngicon_twisted.pngicon_arrow.pngicon_eek.pngicon_smile.pngicon_confused.pngicon_cool.pngicon_evil.pngicon_biggrin.pngicon_idea.pngicon_redface.pngicon_razz.pngicon_rolleyes.pngicon_wink.pngicon_cry.pngicon_surprised.pngicon_lol.pngicon_mad.pngicon_sad.pngicon_exclaim.pngicon_question.png