微信小程序轮播功能 - 蓝蓝设计_UI设计公司

帝皇彩票官网

追求卓越一诺千金

帝皇彩票官网蓝蓝设计,2011年成立,主创清华团队,专注软件和互联网ui设计开发。擅长企业信息化管理、监控、大数据软件UIUE咨询和设计开发服务。立足UI,好好学习,天天进步!


微信小程序轮播功能

2020-1-20 前端达人


<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{duration}}" current="{{swiperCurrent}}" bindchange="swiperChange" class="swiper">
  <block wx:for="{{imgUrls}}" wx:key="unique">
    <swiper-item>
      <image src="{{item}}" class="img" bindtap="swipclick" />
    </swiper-item>
  </block>
</swiper>
————————————————


/* swiper {
    height: 421.5rpx;
} */
swiper-item image {
    width: 100%;
    height: 100%;
}
.swiper-container{
  width: 100%;
  position: relative;
}
.swiper-container .swiper{
  height: 300rpx;
}
.swiper-container .swiper .img{
  width: 100%;
  height: 100%;
}
————————————————


const app = getApp()
Page({
  data: {
    swiperCurrent: 0,
    indicatorDots: true,
    autoplay: true,
    interval: 3000,//自动切换时间间隔
    duration: 800,//滑动动画时长
    circular: true,//是否采用衔接滑动
    imgUrls: [
      '../../img/index/1.jpeg',
      '../../img/index/2.jpeg',
      '../../img/index/3.jpeg'
    ]
  },
  //轮播图的切换事件
  swiperChange: function (e) {
    this.setData({
      swiperCurrent: e.detail.current
    })
    //console.log(e.detail.current);
  },
  //点击指示点切换
  chuangEvent: function (e) {
    this.setData({
      swiperCurrent: e.currentTarget.id
    })
  },
  //点击图片触发事件
  swipclick: function (e) {
    console.log(this.data.swiperCurrent);
    wx.switchTab({
      url: this.data.links[this.data.swiperCurrent]
    })
  },
})
————————————————



« 微信小程序转发/分享功能 小卡片设置 | 真机预览本地页面方式-简单快捷(精简大法Node)»


蓝蓝 http://www.bjhbys.com

  1. 2020年2月(6)
  2. 2020年1月(32)
  3. 2019年12月(50)
  4. 2019年11月(61)
  5. 2019年10月(49)
  6. 2019年9月(48)
  7. 2019年8月(58)
  8. 2019年7月(58)
  9. 2019年6月(58)
  10. 2019年5月(31)
  11. 2019年4月(37)
  12. 2019年3月(43)
  13. 2019年2月(25)
  14. 2019年1月(45)
  15. 2018年12月(41)
  16. 2018年11月(40)
  17. 2018年10月(29)
  18. 2018年9月(40)
  19. 2018年8月(87)
  20. 2018年7月(107)
  21. 2018年6月(86)
  22. 2018年5月(110)
  23. 2018年4月(40)
  24. 2018年3月(35)
  25. 2017年8月(35)
  26. 2017年7月(45)
  27. 2017年6月(7)
  28. 2017年5月(27)
  29. 2017年4月(51)
  30. 2017年3月(70)
  31. 2017年2月(65)
  32. 帝皇彩票官网2017年1月(69)
  33. 2016年12月(55)
  34. 2016年11月(111)
  35. 2016年10月(92)
  36. 2016年9月(53)
  37. 2016年8月(9)
  38. 2016年7月(4)
  39. 2016年6月(9)
  40. 2016年3月(19)
  41. 2016年2月(26)
  42. 帝皇彩票官网2016年1月(30)
  43. 2015年12月(33)
  44. 2015年11月(35)
  45. 2015年10月(46)
  46. 2015年9月(43)
  47. 2015年8月(40)
  48. 2015年7月(33)
  49. 2015年6月(46)
  50. 2015年5月(58)
  51. 2015年4月(70)
  52. 2015年3月(55)
  53. 2015年2月(17)
  54. 2015年1月(33)
  55. 2014年12月(21)
  56. 2014年11月(84)
  57. 2014年10月(94)
  58. 2014年9月(6)
  59. 2014年8月(1)
  60. 2014年7月(13)
  61. 2014年6月(66)
  62. 2014年5月(99)
  63. 帝皇彩票官网2014年4月(88)
  64. 2014年3月(102)
  65. 2014年2月(68)
  66. 2014年1月(83)
  67. 2013年12月(106)
  68. 2013年11月(112)
  69. 2013年10月(61)
  70. 2013年9月(20)
  71. 2013年7月(13)
  72. 2013年6月(27)
  73. 2013年5月(48)
  74. 2013年4月(39)
  75. 2013年3月(8)
  76. 2013年2月(20)
  77. 2013年1月(31)
  78. 2012年12月(33)
  79. 2012年11月(31)
  80. 2012年10月(23)
  81. 2012年9月(8)
  82. 帝皇彩票官网2012年7月(14)
  83. 2012年6月(15)
  84. 2012年5月(31)
  85. 2012年4月(24)
  86. 2012年2月(4)
  87. 2012年1月(8)
  88. 2011年12月(35)
  89. 帝皇彩票官网2011年11月(32)
  90. 2011年10月(13)
  91. 2011年8月(1)
  92. 2011年6月(1)
订阅Rss
状元彩票计划 桔子彩票平台 桔子彩票官网 桔子彩票开奖 桔子彩票平台 状元彩票官网 福建快3开奖 吉利彩票计划 吉利彩票开户 迪士尼彩乐园