微信小程序怎么使用图片轮播及滚动视图

发布时间:2022-01-19 16:22:11 作者:清风
来源:亿速云 阅读:1051

这篇“微信小程序怎么使用图片轮播及滚动视图”文章,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要参考一下,对于“微信小程序怎么使用图片轮播及滚动视图”,小编整理了以下知识点,请大家跟着小编的步伐一步一步的慢慢理解,接下来就让我们进入主题吧。

Scroll-view 可滚动视图区域
Swiper 图片轮播容器
Navigator 页面链接的3种方式
scroll-view
属性说明如下:

微信小程序怎么使用图片轮播及滚动视图

使用竖向滚动时,需要给一个固定高度,通过 WXSS 设置 height。示例代码:

微信小程序怎么使用图片轮播及滚动视图微信小程序怎么使用图片轮播及滚动视图效果图:

微信小程序怎么使用图片轮播及滚动视图注意点:

tip: 请勿在 scroll-view 中使用 textarea、map、canvas、video 组件
tip: scroll-into-view 的优先级高于 scroll-top
tip: 在滚动 scroll-view 时会阻止页面回弹,所以在 scroll-view 中滚动,是无法触发 onPullDownRefresh
tip: 若要使用下拉刷新,请使用页面的滚动,而不是 scroll-view ,这样也能通过点击顶部状态栏回到页面顶部

二、swiper

属性说明:

微信小程序怎么使用图片轮播及滚动视图

注意:其中只可放置组件,否则会导致未定义的行为。

swiper-item

仅可放置在组件中,宽高自动设置为100%。

代码如下:

微信小程序怎么使用图片轮播及滚动视图

JS代码:

// pages/test1/test1.js
Page({
data:{
wxTitle:"微信程序",
alertInfo:"登录成功了",
isShow:false,
imgUrls: [
"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489225534462&di=009148115f436101d6377305b2f660ef&imgtype=0&src=https://www.2cto.com/uploadfile/2018/0519/20180519105145728.jpg",'
],
indicatorDots: true,
autoplay: true,
interval: 5000,
duration: 1000
},

changeIndicatorDots: function(e) {
this.setData({
indicatorDots: !this.data.indicatorDots
})
},
changeAutoplay: function(e) {
this.setData({
autoplay: !this.data.autoplay
})
},
intervalChange: function(e) {
this.setData({
interval: e.detail.value
})
},
durationChange: function(e) {
this.setData({
duration: e.detail.value
})
}
})

效果如下:

微信小程序怎么使用图片轮播及滚动视图

Navgator页面链接
属性说明:

微信小程序怎么使用图片轮播及滚动视图

a.open-type="navigate" 打开新界面

b.open-type="redirect" 在本界面中打开新界面

c.open-type="switchTab" 控制tab页之间的切换

注意:

所有需要跳转链接的界面必须在app.json中注册a, b只能连接非tabBar中注册占用的页面,不能打开url="../index/index",因为pages/index/index界面是tab页c只能打开app.json中注册过的tab页,也就是被tabBar注册的界面

小程序是什么意思

小程序是一种不需要下载安装即可使用的应用,通过扫描二维码或是搜一搜立即使用,操作简单,便于传播,能够实现消息通知、线下扫码、公众号关联等七大功能。它基于微信运行的,类似于APP,想用就用,用完即走,不会占用内存。

以上是“微信小程序怎么使用图片轮播及滚动视图”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!

推荐阅读:
  1. 微信小程序如何使用蓝牙小插件
  2. 微信小程序如何使用globalData

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

小程序 微信小程序

上一篇:使用宝塔、jspstudy等集成环境不能正常访问怎么办

下一篇:怎么修改ueditor编辑器里面的字体选项

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》