小程序好看卡片式轮播

效果图：

wxml

<!-- 轮播 -->
<view class="swiper-view"><swiper class="swipers swiper-box" previous-margin="{{swiperMargin}}" next-margin="{{swiperMargin}}"  autoplay="{{autoplay}}" duration="500" bindchange="swiperChange"><block wx:for="{{banner}}" wx:for-item="item" wx:key="id"><swiper-item bindtap="toDetail" data-proid="{{item.id}}" style="text-align: center;"><view class="swiper-item-view"><image mode="aspectFill" style="width: 100%;" class="swiper-image {{ swiperCurrent==index?'active':''}}" src="{{item.url}}" alt=""></image></view></swiper-item></block></swiper><view class="swiper-dots-view"><view class="swiper-dot {{ swiperCurrent==index ? 'active':''}}" wx:for="{{banner}}" wx:key="id"></view>
</view>
</view>

wxss

.swiper-view{position: relative;border-bottom: 1px solid #f6f8fc;
}
.swiper-box {height: 355rpx;}.swiper-item-view {zoom: 1;box-sizing: border-box;}.swiper-item-view:after {display: table;content: "";clear: both;}.swiper-image {overflow: hidden;/* height: 170px; */width: 620rpx;height: 340rpx;transition: transform 500ms;transform: scale(0.95, 0.9); /* 缩放处理，产生一种层次感 */border-radius: 8px;box-shadow: 0px 6px 10px 0px rgba(179, 154, 139, 1);}.swiper-image.active {transform: scale(1, 1);}.swiper-dots-view {/* 水平居中*/position: absolute;display: flex;justify-content: center;width: 100%;left: 0;bottom: 10px;height: 18rpx;/* height: 6px; */}.swiper-dot {width: 6px;height: 6px;margin: 0 3px;border-radius: 3px;background-color: #fff;}.swiper-dot.active {width: 15px;background-color: rgb(221, 65, 3);}

 data: {banner:[{id: 0,url: 'https://img02.mockplus.cn/image/2022-06-21/43c6db10-f10c-11ec-9720-497d9b1b567e.png'},{id: 1,url: 'https://st-gdx.dancf.com/gaodingx/0/uxms/design/20210510-160039-2e5d.png?x-oss-process=image/resize,h_600/interlace,1,image/format,webp'}],swiperMargin: wx.getSystemInfoSync().windowWidth > 380 ? '60rpx' : '50rpx',swiperCurrent: 0,swiperList: []
}// 监听swiper切换
swiperChange(e) {let current = e.detail.current;this.setData({swiperCurrent: current});},

小程序好看卡片式轮播相关推荐

后台和小程序实现卡片式轮播图
营销活动中,轮播图效果是比较常见的,基于轮播图拓展的组件也很多,这里记录一下使用swiper实现卡片式轮播的过程,分为PC端和小程序端,其中PC端是Vue+typescript,小程序端是uni-ap ...
微信小程序最简单的轮播图
小程序轮播图今天给大家分享一个在微信开发者工具开发微信小程序的简单案例--轮播图(只用wxml和wxss) 话不多说,直接上代码!!! 效果图 WXML代码基本属性介绍 <!-- indic ...
微信小程序使用swiper制作轮播图留白的解决方法
微信小程序相比网页制作轮播图快捷了很多,直接可以使用swiper标签,但是对于新手来说,也有很多不可避免的坑. 附上轮播图代码 <view class="swp">&l ...
uni-app卡片式轮播
uni-app卡片式轮播视图部分: <template><uni-swiper-dot :info="info" :current="current& ...
uniapp卡片式轮播图——uView
1.下载安装uView uView2.0重磅发布,利剑出鞘,一统江湖 - DCloud 插件市场 2.在项目根目录中的main.js中,引入并使用uView的JS库,注意这两行要放在import Vu ...
php 小程序轮播图,微信小程序swiper组件构建轮播图代码分享
本文主要和大家介绍微信小程序 swiper组件构建轮播图的实例的相关资料,如有疑问请留言或者到本站社区交流讨论,需要的朋友可以参考下,希望能帮助到大家. 微信小程序 swiper组件构建轮播图的实例 ...
模仿最新版爱奇艺卡片式轮播效果CardBannerDemo
本文介绍了一款模仿最新版爱奇艺卡片式轮播lib github地址:https://github.com/xuezj/CardBannerDemo CardBannerDemo 效果图 Attribut ...
【微信小程序】实现广告轮播图
文章目录一.示例代码二.展示优化 1.衔接滑动 2.居中显示 3.图片完整 4.图片标题三.指示点优化 1.样式优化 2.特效优化四.所有代码五.参考博文六.视频图片混播最终效果图一. ...
【微信小程序】实现简单轮播图效果
微信小程序实现轮播图效果轮播图实现效果:(可循环播放) 代码实现:(复制可用) index.wxml: <view class="swiper"><swiper ...

小程序好看卡片式轮播

小程序好看卡片式轮播相关推荐

最新文章

热门文章