文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

微信小程序滑块视图容器swiper怎么用

2023-06-26 08:35

关注

这篇“微信小程序滑块视图容器swiper怎么用”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“微信小程序滑块视图容器swiper怎么用”文章吧。

底部的tabBar

可设置的属性有color、selectedColor、borderStyle、backgroundColor、list至少2个,最多5个(其属性有pagePath、text、iconPath、selectedIconPath等)

"tabBar": {    "color":"#dddddd",    "selectedColor":"#3cc51f",    "borderStyle":"black",    "backgroundColor":"#2B2B2B",    "list": [      {        "pagePath": "pages/movie/movie",        "text": "影院热映",        "iconPath": "assets/img/dy-1.png",        "selectedIconPath": "assets/img/dy.png"      },      {        "pagePath": "pages/recommend/recommend",        "text": "电影推荐",        "iconPath": "assets/img/tj-1.png",        "selectedIconPath": "assets/img/tj.png"      },      {        "pagePath": "pages/search/search",        "text": "查询电影",        "iconPath": "assets/img/search-1.png",        "selectedIconPath": "assets/img/search.png"      }    ]  },

 滑块视图容器 swiper

swiper

滑块视图容器。

属性名类型默认值说明最低版本
indicator-dotsBooleanfalse是否显示面板指示点 
indicator-colorColorrgba(0, 0, 0, .3)指示点颜色1.1.0
indicator-active-colorColor#000000当前选中的指示点颜色1.1.0
autoplayBooleanfalse是否自动切换 
currentNumber0当前所在页面的 index 
intervalNumber5000自动切换时间间隔 
durationNumber500滑动动画时长 
circularBooleanfalse是否采用衔接滑动 
verticalBooleanfalse滑动方向是否为纵向 
bindchangeEventHandle current 改变时会触发 change 事件,event.detail = {current: current, source: source}

从公共库v1.4.0开始, change 事件返回 detail 中包含一个 source 字段,表示导致变更的原因,可能值如下:

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

swiper-item

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

示例代码:

<swiper indicator-dots="{{indicatorDots}}"  autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">  <block wx:for="{{imgUrls}}"><swiper-item>  <image src="{{item}}" class="slide-image" width="355" height="150"/>swiper-item>  block>swiper><button bindtap="changeIndicatorDots"> indicator-dots button><button bindtap="changeAutoplay"> autoplay button><slider bindchange="intervalChange" show-value min="500" max="2000"/> interval<slider bindchange="durationChange" show-value min="1000" max="10000"/> duration
Page({  data: {    imgUrls: [      'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'    ],    indicatorDots: false,    autoplay: false,    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    })  }})

以上就是关于“微信小程序滑块视图容器swiper怎么用”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     807人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     351人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     314人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     433人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     221人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯