微信小程序自定义轮播图滚动样式自定义组件轮播图的实现

效果图：

实现代码：

wxml


<view class="card card_b"><swiper autoplay="{{true}}" interval="4000" duration="500" current="{{swiperCurrent}}" bindchange="swiperChange" class="swiper" circular="{{true}}"><block wx:for="{{imgUrls}}" wx:key="unique"><swiper-item><view catchtap="click_swiper" id="{{index}}"><image src="{{item}}" class="img"></image></view></swiper-item></block></swiper><view class="s_b"><block wx:for="{{imgUrls}}" wx:key="unique"><view class="dot {{index == swiperCurrent ? ' active' : ''}}"></view></block></view>
</view>

Page({data: {// 轮播swiperCurrent: 0,imgUrls: ['/images/banner1.jpg','/images/banner2.jpg','/images/banner3.jpg','/images/banner4.jpg'],},// 轮播swiperChange: function(e) {this.setData({index: e.detail.current,swiperCurrent: e.detail.current})},onLoad: function (options) {},
})

css

.card {background: white;border-radius: 15rpx;margin-bottom: 30rpx;width: 94%;margin-left: 3%;
}.card_b {min-width: 80%;min-height: 200rpx;position: fixed;bottom: 20rpx;background: #efeff3;
}swiper {height: 200rpx;border-radius: 15rpx;
}swiper-item {/* position: relative; */border-radius: 15rpx;
}swiper-item .img {height: 200rpx;width: 100%;border-radius: 15rpx;
}.s_b {position: fixed;bottom: 66rpx;right: 36rpx;display: flex;justify-content: center;
}.dot {height: 2px;width: 22rpx;background: white;margin-right: 6rpx;
}.active {background: red;
}

到这就完成了，下面是把它封装成自定义组件的代码和引用方式。

自定义组件轮播图的实现

在项目跟目录创建 components 文件夹，里面创建 swiper 自定义组件：

swiper.js

Component({properties: {// 这里定义了innerText属性，属性值可以在组件使用时指定innerText: {type: String,value: 'default value',}},data: {// 轮播swiperCurrent: 0,imgUrls: ['/images/banner1.jpg','/images/banner2.jpg','/images/banner3.jpg','/images/banner4.jpg'],},methods: {// 这里是一个自定义方法// 轮播swiperChange: function (e) {this.setData({index: e.detail.current,swiperCurrent: e.detail.current})},}
})

swiper.json

{"component": true
}

swiper.wxml


<view class="card card_b"><swiper autoplay="{{true}}" interval="4000" duration="500" current="{{swiperCurrent}}" bindchange="swiperChange" class="swiper" circular="{{true}}"><block wx:for="{{imgUrls}}" wx:key="unique"><swiper-item><image src="{{item}}" class="img"></image><view class="s_b"><block wx:for="{{imgUrls}}" wx:key="unique"><view class="dot{{index == swiperCurrent ? ' active' : ''}}"></view></block></view></swiper-item></block></swiper>
</view>

swiper.wxss

.card {background: white;border-radius: 15rpx;margin-bottom: 30rpx;width: 94%;margin-left: 3%;
}.card_b {min-width: 80%;min-height: 200rpx;position: absolute;bottom: 20rpx;background: blue;
}swiper{height: 200rpx;
}swiper-item {position: relative;
}
swiper-item .img{height: 200rpx;border-radius: 15rpx;
}
.s_b {position: absolute;bottom: 26rpx;right: 26rpx;display: flex;justify-content: center;
}.dot {height: 2px;width: 22rpx;background: white;margin-right: 6rpx;
}
.active{background: red;
}

引用该自定义组件：

在引用的页面的json配置文件中添加：

{"usingComponents": {"my_swiper": "../../components/swiper/swiper"}
}

在引用的页面的wxml文件中添加：

<my_swiper />

完成

微信小程序自定义轮播图滚动样式自定义组件轮播图的实现相关推荐

mpvue自定义微信小程序indicator（指示点）样式
mpvue自定义微信小程序indicator(指示点)样式效果图 HTML <template><div class="container"><sw ...
微信小程序：scroll-view制作横向滚动导航条特效
微信小程序:scroll-view制作横向滚动导航条特效一.scroll-view介绍微信小程序官方释义为:可滚动视图区域,目前一共有10几个属性,包括:scroll-x.scroll-y.scr ...
微信小程序：炫酷手持滚动弹幕生成小工具
这是一款滚动弹幕生成微信小程序源码让弹幕文字在手机屏幕上跑起来,LED弹幕手机弹幕,告白神奇,等支持多种模板,每一种模板都支持自定义颜色等等字体跳动,字体表白等等另外用户也可以支持自定义文字 ...
# 解决微信小程序遮罩层底部页面滚动
解决微信小程序遮罩层底部页面滚动一.wxml文件添加catchtouchmove="move". <view class="" class=" ...
微信小程序开发之路（十三）正式开工--设计ER图与数据库的创建
微信小程序开发之路(十三)正式开工–设计ER图数据库的创建先制作班费公是示功能我们在项目的 settings.py 文件中找到 DATABASES 配置项,将其信息修改为: DATABASES = ...
微信小程序把玩（二十八）image组件
原文:微信小程序把玩(二十八)image组件 image组件也是一个程序不可缺少的,可以这样说一个app中image组件随处可以看到,一般 image有两种加载方式第一种是网络图片第二种是本地图片资源 ...
wxss 点击样式_微信小程序点击控件修改样式实例详解
微信小程序点击控件修改样式实例详解现在要在微信小程序中实现点击控件修改样式,如下: 微信小程序中不支持直接操作dom,要实现这种效果,我们需要通过设置data,然后利用数据和界面的双向绑定来实现它. ...
微信小程序把玩（二十六）navigator组件
微信小程序把玩(二十六)navigator组件原文:微信小程序把玩(二十六)navigator组件 navigator跳转分为两个状态一种是关闭当前页面一种是不关闭当前页面.用redirect属性指 ...
微信小程序——前端——抵扣券、优惠券样式
微信小程序--前端--抵扣券.优惠券样式效果图: 实现思路: 左边+划线+右边==使用信息+分割线+使用限制整体底色: .wrapper {margin: 0 auto;width: 100%;d ...
微信小程序引入less并引入公共样式
微信小程序引入less并引入公共样式在原生微信小程序开发中,直接使用wxss来写组件样式是非常麻烦的,它不能进行嵌套书写,也不能声明变量,所以我们经常会引入一些css编译器来辅助我们书写样式,例如l ...

微信小程序自定义轮播图滚动样式自定义组件轮播图的实现

实现代码：

到这就完成了，下面是把它封装成自定义组件的代码和引用方式。

自定义组件轮播图的实现

微信小程序自定义轮播图滚动样式自定义组件轮播图的实现相关推荐

最新文章

热门文章

微信小程序自定义轮播图滚动样式 自定义组件轮播图的实现

实现代码：

到这就完成了，下面是把它封装成自定义组件的代码和引用方式。

自定义组件轮播图的实现

微信小程序自定义轮播图滚动样式 自定义组件轮播图的实现相关推荐

最新文章

热门文章

微信小程序自定义轮播图滚动样式自定义组件轮播图的实现

微信小程序自定义轮播图滚动样式自定义组件轮播图的实现相关推荐