脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 微信小程序swiper轮播

微信小程序swiper实现文字纵向轮播提示效果

 更新时间：2020年01月21日 14:34:20   作者：玩烂小程序  
这篇文章主要介绍了微信小程序swiper实现文字纵向轮播提示效果，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下

摘要

小程序顶部总会看到滚动的通知栏，一般单条的都会用跑马灯去实现，但面对多条的内容，就需要用轮播去实现，轮播自然是swiper了，查了查，还真有vertical这个属性，swiper真好用。

效果

在这里插入图片描述

体验

在这里插入图片描述

代码

wxml

<view class="swiper-view">
 <swiper class="swiper_container" vertical="true" autoplay="true" circular="true" interval="2000">
  <block wx:for="{{msgList}}">
   <swiper-item>
    <view class="swiper_item">{{item.title}}</view>
   </swiper-item>
  </block>
 </swiper>
</view>

wxss

.swiper-view{
 display: flex;
 flex-direction: row;
 justify-content: center;
 align-items: center;
 border-radius: 5rpx;
 background: tomato
}

.swiper_container {
 height: 50rpx;
 width: 90%;
}

.swiper_item {
 height: 50rpx;
 width: 90%;
 font-size: 26rpx;
 white-space: nowrap;
 display: flex;
 flex-direction: row;
 justify-content: center;
 align-items: center;
 color: white
}

Page({
 data: {
  msgList: [
   { title: "朋友圈" },
   { title: "文章" },
   { title: "公共号" },
   { title: "小程序" },
   { title: "音乐" },
   { title: "表情" },
   { title: "订阅号" }]
 }
})

总结

以上所述是小编给大家介绍的微信小程序swiper实现文字纵向轮播提示效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

您可能感兴趣的文章:

相关文章

  • 一个简单的js动画效果代码

    一个简单的js动画效果代码

    前段时间为了做动画,学习了一下tween算法的使用,这几天根据tween算法,然后根据各种材料参考,做了一个简单的动画函数.
    2010-07-07
  • javascript编写简易计算器

    javascript编写简易计算器

    这篇文章主要为大家详细介绍了javascript编写简易计算器的相关代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-05-05
  • pdfmake生成pdf的使用方法

    pdfmake生成pdf的使用方法

    本文介绍了如何使用pdfmake第三方库在项目中根据模板生成PDF文件,文中还提到了常用的配置,如页眉和页脚效果,对pdfmake pdf使用方法感兴趣的朋友一起看看吧
    2024-09-09
  • js正则校验特殊的不可见字符的具体实现

    js正则校验特殊的不可见字符的具体实现

    用户可能从Excel或者其他地方直接复制粘贴,这时候提交到后端会导致获取的用户输入中包含一些特殊的不可见字符,本文主要介绍了js正则校验特殊的不可见字符的具体实现,具有一定的参考价值,感兴趣的可以了解一下
    2024-06-06
  • JavaScript获取XML数据附示例截图

    JavaScript获取XML数据附示例截图

    这篇文章主要介绍了JavaScript获取XML数据的方法,需要的朋友可以参考下
    2014-03-03
  • JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例

    JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例

    这篇文章主要介绍了JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法,结合实例形式分析了JavaScript观察者模式概念、原理、使用方法及相关操作注意事项,需要的朋友可以参考下
    2018-07-07
  • 深入浅析JSON.parse()、JSON.stringify()和eval()的作用详解

    深入浅析JSON.parse()、JSON.stringify()和eval()的作用详解

    这篇文章主要介绍了深入浅析JSON.parse()、JSON.stringify()和eval()的作用详解的相关资料,需要的朋友可以参考下
    2016-04-04
  • 关于js函数解释(包括内嵌,对象等)

    关于js函数解释(包括内嵌,对象等)

    下面小编就为大家带来一篇关于js函数解释(包括内嵌,对象等) 。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • Js过滤空格的实现代码

    Js过滤空格的实现代码

    Js空格过滤代码，这个实用性很强，可以省去用动态语言过滤字符的麻烦，减轻服务器压力，而且JS执行速度较快
    2013-03-03
  • JS正则表达式学习之贪婪和非贪婪模式实例总结

    JS正则表达式学习之贪婪和非贪婪模式实例总结

    这篇文章主要介绍了JS正则表达式学习之贪婪和非贪婪模式用法,结合实例形式总结分析了JS正则表达式中贪婪模式与非贪婪模式的具体功能、使用方法与相关注意事项,需要的朋友可以参考下
    2016-12-12

最新评论