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

2024-03-25 22:07:14

本文实例讲述了微信小程序实现的3d轮播图效果。分享给大家供大家参考，具体如下：

前面写过一篇3d轮播，就是这篇，使用的方法比较笨拙，而且代码不简洁。这次发现swiper也能实现同样的效果。故记录一下。

先看看效果：

wxml：

<swiper previous-margin='50px' next-margin='50px' bindchange="swiperChange" style='height:{{swiperH}};'>
  <swiper-item wx:for='{{imgList}}' wx:key=''>
    <image class='le-img {{nowIdx==index?"le-active":""}}' bindload='getHeight' src='{{item}}' style='height:{{swiperH}};'></image>
  </swiper-item>
</swiper>

（1） previous-margin 和 next-margin 表示前边距和后边距，官网文档有说明的。

（2） swiperChange 就是swiper的切换事件名

（3） style='height:{{swiperH}}' 这是等比设置swiper高度，因为swiper有固定的高度，所以要动态修改一下。这篇文章也有类似的做法

（4） getHeight 是获取图片的宽高，然后再去设置高度这样才能让图片等比缩放

wxss：

swiper {
 padding-top: 30px;
}
.le-img {
 width: 100%;
 display: block;
 transform: scale(0.8);
 transition: all 0.3s ease;
 border-radius: 6px;
}
.le-img.le-active {
 transform: scale(1);
}

（1）最主要的就是scale这个属性了，有了这个属性才能有第二张图片缩放的效果。

js：

data: {
  swiperH:'',//swiper高度
  nowIdx:0,//当前swiper索引
  imgList:[//图片列表
    "/public/img/idx-ad.png",
    "/public/img/idx-ad.png",
    "/public/img/idx-ad.png",
  ]
},
//获取swiper高度
getHeight:function(e){
  var winWid = wx.getSystemInfoSync().windowWidth - 2*50;//获取当前屏幕的宽度
  var imgh = e.detail.height;//图片高度
  var imgw = e.detail.width;
  var sH = winWid * imgh / imgw + "px"
  this.setData({
    swiperH: sH//设置高度
  })
},
//swiper滑动事件
swiperChange:function(e){
  this.setData({
    nowIdx: e.detail.current
  })
},

就这些简单的代码就完成啦 ^_^

希望本文所述对大家微信小程序开发有所帮助。

微信小程序使用swiper组件实现类3D轮播图

Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端. Swiper能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. Swiper开源.免费.稳定.使用简单.功能强大,是架构移动终端网站的重要选择! 在写微信小程序时,有写到实现3D轮播图的效果,可以直接使用微信小程序中自带的组件swiper来实现效果图如下: 1.swiper的相关属性 indicator-dots 是否显示小圆点,也可以自己重新设置小圆点 circular 是否衔接滑动,就是实现无限
微信小程序轮播图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组件创建轮播图的具体代码,供大家参考,具体内容如下一.视图容器(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组件构建轮播图的实例实现效果图: wxml基础文件: <view class="classname"> <swiper indicator-dots="true" interval="1000" autoplay="true" indicator-active-color="red"> <swiper-item><image src=&qu
微信小程序之swiper轮播图中的图片自适应高度的方法

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

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

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

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

本文实例为大家分享了微信小程序实现3D轮播图效果的具体代码,供大家参考,具体内容如下首先上一下效果图: 在做的时候首先想到的是用swiper组件但是发现swiper组件放进去图片的时候会没有3d的效果,原因是swiper组件自带的style属性限制了3d效果所需要的属性,所以单独写了一个组件. index.html <view class='page-con'> rotate.wxml <view class='stage'> <view class='wrapper' b
微信小程序联网请求的轮播图

微信小程序的轮播图和Android的轮播图一点不一样 ,这里我们看一下我们需要用到的控件介绍这里我们用到了swiper这个组件,上边的图片已经把这个组件的属性都列出来了我们用的时候直接用就可以了接下来,再看一下网络请求的API,这里我们用到的是GET 请求,我们开一下微信小程序官方给我们的API 接下来就是开启我们小程序轮播图之旅了,附上一张效果图首先,我们看一下我们的index.wxml文件 <view> <swiper class="swiper_box"
微信小程序实现文字无限轮播效果

本文实例为大家分享了微信小程序实现文字无限轮播展示的具体代码,供大家参考,具体内容如下 .JS文件 onLoad中添加下列代码 var self = this; var width = wx.getSystemInfoSync().screenWidth; function carousel_num() { var animation = wx.createAnimation({ transformOrigin: "50% 50%", duration: 5000, timingFu
Swift实现3D轮播图效果

本文实例为大家分享了Swift实现3D轮播图效果的具体代码,供大家参考,具体内容如下整天逛淘宝,偶尔有一天看到其中的展示页有个看起来很炫的效果,闲来无事就试着写一个出来,先来看效果: 简单记一下思路,这里我选择使用UICollectionView控件,先根据其复用和滚动的特性做出无限轮播的效果,关键代码: //数据源数组 let totalCount = 100 var models: [String] = [String]() { didSet { //判断元素个数 if models.co
js实现3D轮播图效果

本文实例为大家分享了js实现3D轮播图效果的具体代码,供大家参考,具体内容如下主要有平移和旋转构成3d效果的轮播图,小白一只,不足之处还请大家多多指教,代码如下 css代码: *{ padding: 0; margin: 0; } .box{ position: relative; width: 100%; height: 100%; top: 200px; margin: auto; } .warpper{ position: absolute; width: 100%; height: 1
JS实现头条新闻的经典轮播图效果示例

本文实例讲述了JS实现头条新闻的经典轮播图效果.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, m
Android开发实现的自动换图片、轮播图效果示例

本文实例讲述了Android开发实现的自动换图片.轮播图效果.分享给大家供大家参考,具体如下: 50行代码急速实现轮播图: 先看效果: 两个例子没太大区别, 不过i是布局文件中控件的Height不一样罢了这里一第二个为例: public class MainActivity extends Activity { int[] imageIds = new int[]{ R.drawable.a00,R.drawable.a01,R.drawable.a02,R.drawable.a3,R.draw
微信小程序实现带缩略图轮播效果

本文实例为大家分享了微信小程序实现实现轮播效果展示的具体代码,供大家参考,具体内容如下 wxml: <view id="content">  <view class="recommend"> <view class="swiper-container"> <swiper autoplay="auto" interval="5000&quo

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

相关推荐

随机推荐