• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

微信小程序公告滚动通知 - 子钦加油

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

微信小程序公告滚动通知

微信小程序实现上下滚动消息提醒,主要是利用swiper组件来实现,swiper组件在小程序中是滑块视图容器。

通过vertical属性(默认为false,实现默认左右滚动)设置为true来实现上下滚动。
只要你的swiper存在vertical属性,无论你给值为true或者false或者不设参数值,都将实现上下滚动

  • 效果图


     
    左右滚动
  • wxml code

<!-- 公告 -->
<view class=\'adsec\'>
  <icon class=\'iconfont icongonggao c_main fs_36\'></icon>
  <text class=\'c_main fs_26\'>公告:</text>
  <swiper class="swiper_container" autoplay="true" circular="true" interval="2000">
    <block wx:for="{{msgList}}">
      <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>
</view>
<!-- 公告 end -->
  • wxs code
.adsec{
  width: 90%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  margin: 10rpx auto;
  background:rgba(254,242,242,1);
  border-radius:6px;
  padding: 7rpx 10rpx;
  height: 50rpx;
}
.adsec icon{
  display: flex;
  margin-right: 10rpx;
}
.swiper_container {
  height: 55rpx;
  width: 80%;
  line-height: 55rpx;
  padding-left: 10rpx;
}

.swiper_item {
  font-size: 25rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 2px;
}
  • js
msgList: [
      { url: "url", title: "恭喜xxx完成任务退回200进入领奖区" },
      { url: "url", title: "恭喜xxx获得XXX奖励" },
      { url: "url", title: "恭喜xxx完成任务退回300进入领奖区" }]

来源:https://www.jianshu.com/p/71502ae00d5c

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序订阅消息通知发布时间:2022-07-18
下一篇:
微信小程序消息通知-打卡考勤发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap