微信小程序轮播图(详细)「建议收藏」

微信小程序轮播图(详细)「建议收藏」微信小程序轮播图效果图wxml:<swiperindicator-dots=”{{indicatorDots}}”autoplay=”{{autoplay}}”interval=”{{interval}}”duration=”{{duration}}”><blockwx:for=”{{imgUrls}}”><swiper-item><imagesrc=”{{item}}”class=”slide-image”/></sw

大家好,又见面了,我是你们的朋友全栈君。

微信小程序轮播图

效果图
在这里插入图片描述
在这里插入图片描述

wxml:

<swiper indicator-dots="{ 
   {indicatorDots}}" autoplay="{ 
   {autoplay}}" interval="{ 
   {interval}}" duration="{ 
   {duration}}">
<block wx:for="{ 
   {imgUrls}}">
<swiper-item>
<image src="{ 
   {item}}" class="slide-image" />
</swiper-item>
</block>
</swiper>

wxss:

swiper { 
   
  height: 400rpx;
  width: 100%;
}
swiper-item { 
   
  height: 100%;
  width: 100%;
}
.slide-image{ 
   
   height: 100%;
  width: 100%;
}

js:

data: { 
   
    current: 0,  //当前所在页面的 index

    indicatorDots: true, //是否显示面板指示点

    autoplay: true, //是否自动切换

    interval: 3000, //自动切换时间间隔

    duration: 800, //滑动动画时长

    circular: true, //是否采用衔接滑动

    imgUrls: [

      'http://1027145.user-website5.com/yizhan/images-2/banner1.jpg',

      'http://1027145.user-website5.com/yizhan/images-2/banner2.jpg',

      'http://1027145.user-website5.com/yizhan/images-2/banner3.jpg'

    ],

    links: [

      '/pages/second/register',

      '/pages/second/register',

      '/pages/second/register'

    ]



  },

  //轮播图的切换事件

  swiperChange: function(e) { 
   

    this.setData({ 
   

      swiperCurrent: 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]

    })

  }
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/143184.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • DSP6678入门必看「建议收藏」

    DSP6678入门必看「建议收藏」DSPC6000系列入门必看如何选择外部时钟?DSP的内部指令周期较高,外部晶振的主频不够,因此DSP大多数片内均有PLL。但每个系列不尽相同。TMS320C62xx:PLL可以×1,×4,×6,×7,×8,×9,×10和×11,因此外部主频可以为11.8MHz-300MHz。TMS320C67xx:PLL可以×1和×4,因此外部主频可以为12.5MHz-230MHz。TMS320C64…

  • LDR命令

    LDR命令  LDR指令用于从内存中将一个32位的字读取到指令中的目标寄存器中,如果目标寄存器为PC,则可以实现“长”跳转。主要有一下3种方式使用:ldrr0,_startldrr0,=_startldrpc,_start  逐条分析:一、ldrr0,_start  从内存地址_start的地方,把其对应的命令执行对应的“执行码”读入到r0中。二、ldrr0,=_start  …

  • 网络流量统计技术

    网络流量统计技术一、netstream“NetStreamNetStream技术应用背景Internet的高速发展为用户提供了更高的带宽,支持的业务和应用日渐增多,传统流量统计如SNMP、端口镜像等,由于统计流量

  • excel计算两个经纬度距离_经纬度与距离换算公式

    excel计算两个经纬度距离_经纬度与距离换算公式1.参考:http://jingyan.baidu.com/article/48b558e34df4d47f39c09a42.html 在E2单元格输入公式=6371004*ACOS(1-(POWER((SIN((90-B2)*PI()/180)*COS(A2*PI()/180)-SIN((90-D2)*PI()/180)*COS(C2*PI()/180)),2)+POWER((SIN(…

  • SfM问题

    SfM问题StructurefromMotion(SfM)是一个估计相机参数及三维点位置的问题。SfM也就是三维重建

  • 工作流引擎activiti_基于若依框架的二次开发

    工作流引擎activiti_基于若依框架的二次开发若依框架使用、activiti工作流

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号