微信小程序单行文字上下滚动

最新推荐文章于 2025-09-09 16:43:28 发布

原创最新推荐文章于 2025-09-09 16:43:28 发布 · 3.8k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序

微信小程序专栏收录该内容

9 篇文章

订阅专栏

index.wxml

    <swiper class="swiper_container" vertical="true" autoplay="true" circular="true" interval="1000">
      <block wx:for="{{msgList}}" wx:key="">
        <!-- <navigator url="/pages/index/index?title={{item.url}}" open-type="navigate"> -->
          <swiper-item>
            <view class="swiper_item">{{item.title}}</view>
          </swiper-item>
        <!-- </navigator> -->
      </block>
    </swiper>

index.wxss

.swiper_container {
  height: 45rpx;
  width: 100%;
}
.swiper_item {
  font-size: 30rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

index.js

  onShow: function (e) {
    this.setData({
      msgList: [
        { title: "多地首套房贷利率上浮 热点城市渐迎零折扣时代" },
        { title: "交了20多年的国内漫游费将取消 你能省多少话费？" },
        { title: "北大教工合唱团出国演出遇尴尬:被要求给他人伴唱" }]
    });
  },