微信小程序使用swiper组件实现层叠轮播图

2024-11-26 18:39:28

本文实例为大家分享了微信小程序实现层叠轮播图的具体代码，供大家参考，具体内容如下

wxml:

<view class="banner-swiper">
  <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" current='{{swiperCurrent}}'
indicator-color="{{beforeColor}}" indicator-active-color="{{afterColor}}" circular='{{circular}}'
previous-margin="{{previousmargin}}" next-margin="{{nextmargin}}" bindchange="swiperChange" >
    <block wx:for="{{arr}}" wx:key="key">
     <swiper-item>
      <image src="{{item.images}}" class="slide-image{{index == swiperCurrent ? ' active' : ''}}"
bindchange="chuangEvent" id="{{index}}"></image>
     </swiper-item>
    </block>
  </swiper>
 </view>

wxss:

.banner-swiper {
 width: 100%;
 height: 500rpx;
 overflow: hidden;
}

swiper {
 display: block;
 height: 500rpx;
 position: relative;
}

.slide-image {
 width: 96%;
 display: block;
 margin: 0 auto;
 height: 450rpx;
 margin-top:25rpx;
}
.active{
 margin-top:0rpx;
 height: 500rpx;
}

js:

Page({
 data: {
  //轮播图
  swiperCurrent:1,
  arr: [{
   images: 'images/1.jpg'
  },
  {
   images: 'images/5.jpg'
  },
  {
   images: 'images/3.jpg'
  },
  {
   images: 'images/4.jpg'
  }
  ]
  indicatorDots: true,
  autoplay: true,
  interval: 2000,
  duration: 1000,
  circular: true,
  beforeColor: "white",//指示点颜色
  afterColor: "coral",//当前选中的指示点颜色
  previousmargin:'30px',//前边距
  nextmargin:'30px',//后边距

 },

 //轮播图的切换事件
 swiperChange: function (e) {
  console.log(e.detail.current);
  this.setData({
   swiperCurrent: e.detail.current  //获取当前轮播图片的下标
  })
 },
 //滑动图片切换
 chuangEvent: function (e) {
  this.setData({
   swiperCurrent: e.currentTarget.id
  })
 },
})

效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

微信小程序实现的3d轮播图效果示例【基于swiper组件】

本文实例讲述了微信小程序实现的3d轮播图效果.分享给大家供大家参考,具体如下: 前面写过一篇3d轮播,就是这篇,使用的方法比较笨拙,而且代码不简洁.这次发现swiper也能实现同样的效果.故记录一下. 先看看效果: wxml: <swiper previous-margin='50px' next-margin='50px' bindchange="swiperChange" style='height:{{swiperH}};'> <swiper-item wx:f
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例

本文实例讲述了微信小程序非swiper组件实现的自定义伪3D轮播图效果.分享给大家供大家参考,具体如下: 效果如下: 我用了很笨的方法实现的,大致就是: 1.当前点击的div(view)如果前后都有内容,那么,当前div(view)就设置到中间,前一个就设置到左边,前一个的前面所有全部设置到最左边,后面一个设置到右边,后面所有设置到最右边 2.当前点击的div(view)如果前面无内容,即第一个,那么,当前div(view)设置到中间,后面一个设置到右边,后面所有设置到最右边 3.当前点击的di
微信小程序之swiper轮播图中的图片自适应高度的方法

小程序中的轮播图很简单,官方都有例子的,但是唯一的缺陷就是swiper是固定死的150px高度,这样如果传入的图片大于这个高度就会被隐藏.辣么,怎样让图片自适应不同分辨率捏. 我的思路是:获取屏幕宽度,获取图片的宽高,然后等比设置当前屏幕宽度下swiper的高度. 1.结构 <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}
微信小程序使用swiper组件实现类3D轮播图

Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端. Swiper能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. Swiper开源.免费.稳定.使用简单.功能强大,是架构移动终端网站的重要选择! 在写微信小程序时,有写到实现3D轮播图的效果,可以直接使用微信小程序中自带的组件swiper来实现效果图如下: 1.swiper的相关属性 indicator-dots 是否显示小圆点,也可以自己重新设置小圆点 circular 是否衔接滑动,就是实现无限
微信小程序 swiper组件构建轮播图的实例

微信小程序 swiper组件构建轮播图的实例实现效果图: wxml基础文件: <view class="classname"> <swiper indicator-dots="true" interval="1000" autoplay="true" indicator-active-color="red"> <swiper-item><image src=&qu
微信小程序视图容器（swiper）组件创建轮播图

本文为大家分享了微信小程序swiper组件创建轮播图的具体代码,供大家参考,具体内容如下一.视图容器(Swiper) 1.swiper:滑块视图容器微信官方文档二.swiper应用 1.页面逻辑(index.js) Page({ data: { imgUrls: [ { link: '/pages/index/index', url: '/images/001.jpg' }, { link: '/pages/list/list', url: '/images/002.jpg' }, { l
微信小程序 swiper组件轮播图详解及实例

微信小程序 swiper组件轮播图照着开发文档尝试,总是能有所收获.之前做Android开发,做个轮播图并不简单,用上viewpage再设置圆点,折腾一通之后还一堆bug.今天尝试微信小程序开发做轮播图,真是感动的泪流满面.废话说完了,上图. 上图就是一个简易的轮播图,是不是很简易.23333 主要是代码也很简单. 1.index.wxml  <swiper class="swiper" indicator-dots="t
微信小程序轮播图swiper详解及实例（源码下载）

微信小程序 swiper 轮播图前言: 1.更新了v0.12的版本后,每次保存都弹出来一个打开文件窗口. 2.swiper组件的属性indicator-dots,值为false时,面板指示点还是显示.要把indicator-dots属性直接删掉. 下面进入正题:默认的swiper面板指示点都是小圆点黑灰的,但这满足不了广大小伙伴需求,比如其他颜色的,椭圆形的,方形的等等.... 首先当然是要禁用掉(直接删掉)swiper属性indicator-dots,再用view组件模拟dots,对应的代码
微信小程序使用swiper组件实现层叠轮播图

本文实例为大家分享了微信小程序实现层叠轮播图的具体代码,供大家参考,具体内容如下 wxml: <view class="banner-swiper"> <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" current='{{swiperCurrent}}' indicator-color="{{beforeColor}}" i
微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】

本文实例讲述了微信小程使用swiper组件实现图片轮播切换显示功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml: <swiper indicator-dots="true"autoplay="true" interval="3000" duration="600" style="height:300px;"> <swiper-item> <
微信小程序实现带放大效果的轮播图

本文实例为大家分享了微信小程序实现带放大效果的轮播图,供大家参考,具体内容如下效果如图 WXML  <view class='Carousel'> <view class="recommend"> <view class="swiper-container"> <swiper class="swiper" autoplay="auto" inter
微信小程序实现下拉刷新和轮播图效果

本文实例为大家分享了微信小程序实现下拉刷新和轮播图展示的具体代码,供大家参考,具体内容如下先上图,再解释 wxml页面代码: <scroll-view scroll-y="true" bindscrolltolower="lower" style="height:{{screenH}}px" class="scroll"> <swiper autoplay="{{autoplay}}"
微信小程序实现电影App导航和轮播

本文实例为大家分享了微信小程序实现电影App导航和轮播的具体代码,供大家参考,具体内容如下最终的目的: 底部:我们要搞好这样的底部要在app.json填写tabBar 在pages下面填写tabBar "tabBar": { "color": "#dddddd",//默然的颜色 "selectedColor": "#3cc51f",//被点击后更改的颜色 "borderStyle":
微信小程序视图容器组件的详解及实例代码

微信小程序视图容器组件详解: 小程序给出的视图容器组件有三个:</view>.</scroll-view>和</swiper>: 1.</view> 视图容器 </view>相当于html中的</div>标签,有四个属性: hover和hover-class与点击效果有关:hover设置是否启用点击效果,而hover-class设置点击的效果. hover-start-time和hover-stay-time与点击效果的时间有关:h
微信小程序之swiper滑动面板用法示例

本文实例讲述了微信小程序之swiper滑动面板用法.分享给大家供大家参考,具体如下: swiper就是为了以后做轮播图用的.下面是一些它的属性 PS:关于微信小程序组件可参考本站在线工具微信小程序组件说明表http://tools.jb51.net/table/wx_component 或官网https://developers.weixin.qq.com/miniprogram/dev/component/ 1.首先新建一个page(记得在app.json中注册),上效果图. 2.index.
微信小程序 wxapp内容组件 icon详细介绍

微信小程序内容组件相关文章: 微信小程序 wxapp内容组件 icon 微信小程序 wxapp内容组件 text 微信小程序 wxapp内容组件progress icon 图标. 属性名类型默认值说明 type String icon的类型,有效值:success, success_no_circle, info, warn, waiting, cancel, download, search, clear size Number 23 icon的大小,单位px color Col

微信小程序使用swiper组件实现层叠轮播图

相关推荐

随机推荐