小程序开发信息公告轮播，及点击跳转

最新推荐文章于 2024-08-16 23:32:07 发布

Gow_an

最新推荐文章于 2024-08-16 23:32:07 发布

阅读量3.2k

点赞数 2

分类专栏：微信小程序文章标签：小程序开发轮播小程序开发动态消息公告小程序开发首页公告

本文链接：https://blog.csdn.net/gow_an/article/details/80355545

版权

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

2 篇文章 0 订阅

订阅专栏

给大家展示一个简单的信息公告轮播，及其点击后跳转，效果如下：

wxml

<swiper class="swiper_container" vertical="true" autoplay="true" circular="true" interval="2000">
    <block wx:for="{{inforList}}">
    <navigator url="{{item.url}}" open-type="navigate">
        <swiper-item>
          <view class="swiper_item">{{item.title}}</view>
        </swiper-item>
      </navigator>
    </block>
  </swiper>

js，把'url'改成要跳转页面的路径

Page({
  data: {
  },
  onLoad(e) {
    console.log(e.title)
    this.setData({
      inforList: [
        { url: "url", title: "公告：国家关于增值税调整的通知" },
        { url: "url", title: "公告：清得快二线城市通知" },
        { url: "url", title: "公告：纳尼，要回去毕业答辩了？" }]
    });
  }
})

wxss

page{
  background-color:#EDECE8;
}
.swiper_container {
  margin-top: 20rpx;
  height: 55rpx;
  width: 100%;
  background-color: white;
}

.swiper_item {
  margin-top: 10rpx;
  font-size: 25rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 2px;
}