【微信小程序】3D效果轮播图

效果图：

<view class='swiper-container'><swiper class='swiper-block' autoplay='true' circular='true' previous-margin='90rpx' next-margin='90rpx' current='0' bindchange='swiperChange' interval='5000' duration='1000'><block wx:key='unique' wx:for='{{swiperImgUrls}}'><swiper-item class='swiper-item'><image bindchange='imageChange' id='{{index}}' src='{{item}}' class='slide-image {{swiperCurrent == index ? "active" : ""}}' /></swiper-item></block></swiper><!-- 自定义指示点dot --><view class="dots"><block wx:for="{{swiperImgUrls}}" wx:key="unique"><view class='dot {{swiperCurrent == index ? "active" : ""}}'></view></block></view>
</view>

data:{swiperImgUrls: ['https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fa79e291099ac011b04abcb9bc794af52bb6f04271be6aa-REUjbL_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639314033&t=c8f4cb42238d0246e1b0f7526a5d8112','https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Ffa1438c6327b9c5587d343a7d5c63bf44ff0f59433bd2-J9SfRb_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639314033&t=572aecedd36a681555b7ccc86cdca2fe','https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fdesk-fd.zol-img.com.cn%2Ft_s960x600c5%2Fg5%2FM00%2F02%2F07%2FChMkJlbKy1GAKCQ-ARabe7z3JEM305.jpg&refer=http%3A%2F%2Fdesk-fd.zol-img.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639314033&t=187e27939489c620db54c954c6b0f9b1'],swiperCurrent: 0,
},/*** 轮播自动滑动时，获取当前的轮播id*/swiperChange(e) {const that = this;that.setData({swiperCurrent: e.detail.current})},/*** 图片手动滑动时，获取当前的轮播id*/imageChange(e) {const that = this;that.setData({swiperCurrent: e.currentTarget.id})},

.swiper-container {position: relative;
}.swiper-block {height: 480rpx;width: 100%;
}.swiper-item {display: flex;flex-direction: column;justify-content: center;align-items: flex-start;overflow: unset;
}.slide-image {height: 320rpx;width: 520rpx;border-radius: 9rpx;box-shadow: 0px 0px 30rpx rgba(0, 0, 0, 0.2);margin: 0rpx 30rpx;z-index: 1;
}.active {transform: scale(1.14);transition: all 0.2s ease-in 0s;z-index: 20;
}/* dot定位位置 */.swiper-container .dots {position: absolute;left: 0;right: 0;bottom: 20rpx;display: flex;justify-content: center;
}/* 未经过前dot */.swiper-container .dots .dot {margin: 0 8rpx;width: 14rpx;height: 14rpx;background-color: transparent;border-radius: 8rpx;border: 0.1rpx solid #31c27c;transition: all 0.6s ease-in-out;
}/* 经过后dot */.swiper-container .dots .dot.active {width: 24rpx;background: #31c27c;
}

【微信小程序】3D效果轮播图相关推荐

php实现轮播图代码,微信小程序实例：轮播图的代码实现与分析
本篇文章给大家带来的内容是关于微信小程序实例:轮播图的代码实现与分析,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 本文来说说轮播图,最常见的一个轮播图,中间带小圆点,自动轮播. S ...
微信小程序的swiper轮播图中的图片设置自适应高度的一种方法
微信小程序的swiper轮播图中的图片设置自适应高度的一种方法小程序中的轮播图很简单,但是唯一的缺陷就是 swiper 是固定的150px 高度(320px 宽度),这样如果传入的图片大于这个高度就 ...
微信小程序：swiper轮播图添加外层圆角
微信小程序:swiper轮播图添加外层圆角 .swiper-wrap{overflow: hidden;border-radius: 8rpx;box-sizing: border-box;width ...
微信小程序swiper图片尺寸_微信小程序之swiper轮播图中的图片自适应高度的方法...
小程序中的轮播图很简单,官方都有例子的,但是唯一的缺陷就是swiper是固定死的150px高度,这样如果传入的图片大于这个高度就会被隐藏.辣么,怎样让图片自适应不同分辨率捏. 我的思路是:获取屏幕宽度 ...
微信小程序swiper图片尺寸_微信小程序之swiper轮播图中的图片自适应高度
小程序中的轮播图很简单,官方都有例子的,但是唯一的缺陷就是swiper是固定死的150px高度,这样如果传入的图片大于这个高度就会被隐藏.辣么,怎样让图片自适应不同分辨率捏. 我的思路是:获取屏幕宽度 ...
微信小程序开发 | 02 - 轮播图实现（swiper组件）
一.实现思路轮播图基于微信小程序提供的swiper组件(文档)实现. swiper组件中使用到下列属性: display-multiple-items:同时显示的滑块数量 current:当前所在滑 ...
微信小程序自定义swiper轮播图面板指示点|小圆点|进度条
描述: 在工作中开发一个页面,多少都会用到轮播图,但是由于微信官方提供的轮播图swiper组件局限性太大了,所以接下来我会教大家怎么去自定义轮播图的进度条. 简单修改: 如果你的项目只是简单的修改小圆 ...
微信小程序之swiper轮播图
微信小程序,一个不是app胜似app的开发工具,更加准确的说是开发途径,给非专业开发app的同学们提供了一个绝妙的选择轮播图几乎是每一个网站.app必有得一个展示区,用于醒目自己的特点.特色.了解微 ...
微信小程序点击轮播图跳转到微信公众号文章
一.获取微信公众号文章列表要想获取微信公众号的文章列表,需要登录公众号运行账号,进行一下相关的设置. 1.1微信公众号获取文章列表 api接口文档: https://developers.weixi ...
微信小程序swiper实现轮播图，可触发点击事件
实现微信小程序轮换图切换,点击获取图片url,获取当前位置 1.index.js Page({ data: { autoplay: true, dotsBoll: fa ...

【微信小程序】3D效果轮播图

【微信小程序】3D效果轮播图相关推荐

最新文章

热门文章