位置: IT常识 - 正文

【uniapp小程序开发】—— 组件封装之【自定义轮播图】(小程序uniacid)

编辑:rootadmin
【uniapp小程序开发】—— 组件封装之【自定义轮播图】 文章目录🍋前言:🍍正文1、首先了解`swiper`组件1.1、小小的demo示例:1.2、自定义轮播图效果展示说明2、完成自定义轮播图效果3、组件封装——自定义轮播图3.1、创建`swiper-doc.vue`组件3.2、组件调用,封装完成🎃专栏分享:🍋前言:

推荐整理分享【uniapp小程序开发】—— 组件封装之【自定义轮播图】(小程序uniacid),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:uniapp 打开小程序,uniapp小程序云开发,uniapp 小程序,uni app开发小程序,uniapp打开微信小程序,小程序uniacid,uni app开发小程序,uni app开发小程序,内容如对您有帮助,希望把文章链接给更多的朋友!

本文主要展示小程序端封装轮播图组件,使用的是uniapp进行的开发,主要使用的是uniapp官网提供的swiper组件,可以参考官方文档,查看一些相关API。

效果图一睹为快:

话不多说直接上正文一起来学习一下封装轮播图组件吧!

🍍正文1、首先了解swiper组件

滑块视图容器。

一般用于左右滑动或上下滑动,比如banner轮播图。

注意滑动切换和滚动的区别,滑动切换是一屏一屏的切换。swiper下的每个swiper-item是一个滑动切换区域,不能停留在2个滑动区域之间。

1.1、小小的demo示例:<template><view class="uni-margin-wrap"> <swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="2000" :duration="500"> <swiper-item> <view class="swiper-item uni-bg-red">A</view></swiper-item><swiper-item> <view class="swiper-item uni-bg-green">B</view></swiper-item><swiper-item> <view class="swiper-item uni-bg-blue">C</view></swiper-item></swiper></view></template><style>.uni-margin-wrap {width: 690rpx;width: 100%;}.swiper {height: 300rpx;}.swiper-item {display: block;height: 300rpx;line-height: 300rpx;text-align: center;}</style>

效果图如下:

1.2、自定义轮播图效果展示说明

我们要做的是:

轮播图底部颜色渐变

左下方包含对应图片的一行文字说明

指示点在右下方,选中颜色为白色,未选中为灰色

效果图如下:

2、完成自定义轮播图效果【uniapp小程序开发】—— 组件封装之【自定义轮播图】(小程序uniacid)

我们先完成效果再去探讨如何封装成组件。如下示例代码展示了自定义轮播图的效果:

swiper常用属性介绍:

indicator-dots:轮播图正前方的小圆点(此案例没有使用官方提供的,是自定义的在右下角附近)autoplay:是否自动切换interval:图片轮播间隔此处为3秒duration:图片轮播动画时长 此处为0.5秒circular:是否开启无缝轮播(此处为到第三张图片后无缝播放第一张图片)<template><!-- 轮播图组件 --><view class="px-3 py-2 "><view class="position-relative"><swiper :autoplay="true" :interval="3000" :duration="500" circular style="height: 250rpx;"@change="changeIndicatorDots"><swiper-item v-for="(item,index) in swipers" :key="index"><image :src="item.src" mode="sapectFill" style="height:250rpx;width: 100%;" class="rounded-lg"></image></swiper-item></swiper><view class="flex align-center text-white rounded-bottom-lg px-2 pb-1" style="position: absolute; bottom: 0; left: 0; right: 0;background-image: linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,0.8));"><view style="width: 80%;" class="text-ellipsis"><!-- 获取当前指示点的位置,获取对应的title --><text>{{swipers[current].title}}</text></view><view style="width: 20%;" class="flex align-center justify-end flex-shrink"><!-- 指示点选中当前图片为白色 未选中为灰色 --><view v-for="(item,index) in swipers" :key="index" style="height: 16rpx;width: 16rpx ; "class="rounded-circle ml-1":style="index===current?'background-color:rgba(255,255,255,1)':'background-color:rgba(255,255,255,0.5)'"></view></view></view></view></view></view></template><script>export default {data() {return {current: 0, // 标识当前选中的图片序列号swipers: [{src: '/static/swiper/1.jpg',title: '自定义轮播图组件图片一'}, {src: '/static/swiper/2.jpg',title: '自定义轮播图组件图片二名字很长测试用'}, {src: '/static/swiper/3.jpg',title: '自定义轮播图组件图片三'}]}},onLoad() {},methods: { // changeIndicatorDots方法会在轮播的图片切换后调用,e.detail.current表示当前所在滑块的 index changeIndicatorDots(e) {this.current = e.detail.current}}}</script>

示例代码中的class类中的类名样式是我已经在全局配置好的,由于篇幅比较长,之后的小程序文章也会经常使用,我已经上传到了CSDN资源(免费),点击链接跳转下载可查看相对应的样式。

点击跳转下载free.css文件

3、组件封装——自定义轮播图3.1、创建swiper-doc.vue组件

3.2、组件调用,封装完成

首先我们要清楚,我们封装的内容为我们自定义的部分,swiper滑块区域是不需要封装的是通用的,我们使用插槽站位。我们只需要将我们自定义的指示点、介绍文字、渐变模块封装即可。

示例代码如下:

swiper-doc.vue文件:

<template><view class="position-relative"><!-- 轮播图组件不需要直接使用插槽 --><slot></slot><view class="flex align-center text-white rounded-bottom-lg px-2 pb-1" style="position: absolute; bottom: 0; left: 0; right: 0; background-image: linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,0.8));"><view style="width: 80%;" class="text-ellipsis"><!-- 获取当前指示点的位置,获取对应的title --><text>{{info[current].title}}</text></view><view style="width: 20%;" class="flex align-center justify-end flex-shrink"><!-- 指示点选中当前图片为白色 未选中为灰色 --><view v-for="(item,index) in info" :key="index" style="height: 16rpx;width: 16rpx ; "class="rounded-circle ml-1":style="index===current?'background-color:rgba(255,255,255,1)':'background-color:rgba(255,255,255,0.5)'"></view></view></view></view></template><script>export default{props:{info:Array,current:{type:Number,default:0}}}</script>

info表示我们所需的轮播图片数据;

current表示那个轮播图片的索引,用于获取title和指示点。

index.vue文件:

<view class="px-3 py-2 "><swiperDot class="position-relative" :current="current" :info="swipers"><!--swiper常用属性介绍:indicator-dots:轮播图正前方的小圆点(此案例没有使用官方提供的,是自定义的在右下角附近)autoplay:是否自动切换interval:图片轮播间隔此处为3秒duration:图片轮播动画时长 此处为0.5秒circular:是否开启无缝轮播(此处为到第三张图片后无缝播放第一张图片) --><swiper :autoplay="true" :interval="3000" :duration="500" circular style="height: 250rpx;"@change="changeIndicatorDots"><swiper-item v-for="(item,index) in swipers" :key="index"><image :src="item.src" mode="sapectFill" style="height:250rpx;width: 100%;" class="rounded-lg"></image></swiper-item></swiper></swiperDot></view><script> // 引入指示点组件,注册并使用 import swiperDot from '@/components/comon/swiper-doc.vue'export default {components: {swiperDot},data() {return {current: 0, // 标识当前选中的图片序列号swipers: [{src: '/static/swiper/1.jpg',title: '自定义轮播图组件图片一'}, {src: '/static/swiper/2.jpg',title: '自定义轮播图组件图片二名字很长测试用'}, {src: '/static/swiper/3.jpg',title: '自定义轮播图组件图片三'}]}},onLoad() {},methods: {// changeIndicatorDots方法会在轮播的图片切换后调用,e.detail.current表示当前所在滑块的 indexchangeIndicatorDots(e) {this.current = e.detail.current}}}</script>

注意:文章案例中的swipers数组在实际开发中应该是从后端获取的,我们这里是自己直接定义的。

🎃专栏分享:

小程序项目实战专栏:《uniapp小程序开发》 前端面试专栏地址:《面试必看》

⏳ 名言警句:说能做的,做说过的\textcolor{red} {名言警句:说能做的,做说过的}名言警句:说能做的,做说过的

✨ 原创不易,还希望各位大佬支持一下\textcolor{blue}{原创不易,还希望各位大佬支持一下}原创不易,还希望各位大佬支持一下

👍 点赞,你的认可是我创作的动力!\textcolor{green}{点赞,你的认可是我创作的动力!}点赞,你的认可是我创作的动力!

⭐️ 收藏,你的青睐是我努力的方向!\textcolor{green}{收藏,你的青睐是我努力的方向!}收藏,你的青睐是我努力的方向!

✏️ 评论,你的意见是我进步的财富!\textcolor{green}{评论,你的意见是我进步的财富!}评论,你的意见是我进步的财富!

本文链接地址:https://www.jiuchutong.com/zhishi/293102.html 转载请保留说明!

上一篇:详解 HttpServletResponse

下一篇:兰鲁斯特一座名为Pont Fawr的石拱桥,英国威尔士 (© Pajor Pawel/Shutterstock)(兰斯洛特)

  •  怎样把论坛的推广做好?(怎么把论坛帖子删除)

    怎样把论坛的推广做好?(怎么把论坛帖子删除)

  • 苹果手机微信怎么分身的(苹果手机微信怎么分身)(苹果手机微信怎么置顶)

    苹果手机微信怎么分身的(苹果手机微信怎么分身)(苹果手机微信怎么置顶)

  • 华为鸿蒙系统怎么升级(华为鸿蒙系统怎么样)

    华为鸿蒙系统怎么升级(华为鸿蒙系统怎么样)

  • 荣耀手机录音在哪里找(荣耀手机录音在哪里开)

    荣耀手机录音在哪里找(荣耀手机录音在哪里开)

  • 苹果13pro怎么还原网络设置(苹果13pro怎么还涨价了)

    苹果13pro怎么还原网络设置(苹果13pro怎么还涨价了)

  • 苹果蓝牙耳机华为手机可以用吗(苹果蓝牙耳机华强北推荐)

    苹果蓝牙耳机华为手机可以用吗(苹果蓝牙耳机华强北推荐)

  • 荣耀play4pro是多大的屏幕(荣耀 play 4 pro (5g))

    荣耀play4pro是多大的屏幕(荣耀 play 4 pro (5g))

  • 淘宝评论区怎么加好友(淘宝评论区怎么删除)

    淘宝评论区怎么加好友(淘宝评论区怎么删除)

  • 录音的文件夹叫什么(录音文件存在哪个目录)

    录音的文件夹叫什么(录音文件存在哪个目录)

  • 无线充电器的工作原理(无线充电器的工作原理电路图讲解)

    无线充电器的工作原理(无线充电器的工作原理电路图讲解)

  • 安卓用airpods需要下载什么软件(airpods用安卓手机缺少什么功能)

    安卓用airpods需要下载什么软件(airpods用安卓手机缺少什么功能)

  • 小米10微信视频通话怎么美颜(小米10微信视频美颜怎么设置)

    小米10微信视频通话怎么美颜(小米10微信视频美颜怎么设置)

  • 华为荣耀9x支持快充吗(华为荣耀9x支持多少瓦快充)

    华为荣耀9x支持快充吗(华为荣耀9x支持多少瓦快充)

  • 华为终端在哪(华为终端在哪个城市)

    华为终端在哪(华为终端在哪个城市)

  • 微信下载的视频在哪个文件夹(微信下载的视频文件存在手机什么位置)

    微信下载的视频在哪个文件夹(微信下载的视频文件存在手机什么位置)

  • iphone怎么更新版本(iphone怎么更新最新版本)

    iphone怎么更新版本(iphone怎么更新最新版本)

  • 红米2016111是啥型号(红米 2016)

    红米2016111是啥型号(红米 2016)

  • 淘宝会员卡怎么删不了(淘宝会员卡怎么取消)

    淘宝会员卡怎么删不了(淘宝会员卡怎么取消)

  • 华为p30pro投屏怎么用(华为p30promiracast投屏)

    华为p30pro投屏怎么用(华为p30promiracast投屏)

  • 小爱音箱怎么改唤醒词(小爱音箱怎么改音乐播放源)

    小爱音箱怎么改唤醒词(小爱音箱怎么改音乐播放源)

  • 陌陌如何查找好友(陌陌如何查找好友的账号)

    陌陌如何查找好友(陌陌如何查找好友的账号)

  • 劳特布龙嫩山谷,瑞士阿尔卑斯山 (© Leonid Andronov/Getty Images)(瑞士·劳特布龙嫩小镇)

    劳特布龙嫩山谷,瑞士阿尔卑斯山 (© Leonid Andronov/Getty Images)(瑞士·劳特布龙嫩小镇)

  • 浙江增值税专用发票几个点
  • 外贸企业进项税不抵扣分录
  • 税负统计口径
  • 累进税率的税种有哪些
  • 结算备付金会计分录
  • 租金营改增
  • 如何查询公司的财务负责人
  • 应收暂估账务处理
  • 分支机构是否享受小微企业企业所得税优惠?
  • 进口环节应纳消费税的组成计税价格
  • 摊销直线法会计分录怎么写?
  • 不动产进项税额抵扣最新通知2023
  • 以公司买房
  • 一般纳税人取得3%专票可以抵扣吗
  • 境内所得境外发放工资
  • 弱电系统安装的注意要点
  • 房产印花税缴纳
  • 银行年费计入管理费用还是财务费用
  • 如何生成公司开票信息二维码
  • 原材料因管理不善被盗的会计分录
  • 制造业企业存货管理论文
  • 有限公司注册资金多少好
  • 为什么叫win7
  • 工资薪金所得包括差旅费津贴吗
  • PHP:mb_ereg_search_pos()的用法_mbstring函数
  • 上年费用未计提
  • ipv6无网络访问权限怎么解决
  • 扣扣斗图在哪里设置
  • 定金签合同能退吗
  • 二手车交易税咋算
  • 农场新区
  • 销售旧的固定资产 税法规定
  • 增值税申报时,里面没有数据怎么办
  • php自动提交表单
  • Win11系统自带输入法怎么卸载
  • 暂估入库后发票来不了
  • 合作社计提工资
  • 根据不同资产涉及的税有哪些
  • 一般纳税人接受捐赠的固定资产,捐赠方提供了有关凭证
  • 金税四期对企业影响
  • 工程施工人工费,材料费,机械费占多少比例
  • 建筑行业普票和专票的税率一样吗
  • 进项税已认证转出账务处理
  • 定额转查账征收
  • 房地产企业怎么交房产税
  • 已付款未收到货怎么办
  • 初始数据都录入什么意思
  • 罚款是营业外支出还是管理费用
  • 哪些收入属于免增值税
  • 按照管理会计的解释,成本的相关性是
  • 残值收入交税吗
  • 税局代开专用发票时交的钱如何记账?
  • 分支机构是否需要设立账簿
  • 商业会计的任务有哪些
  • Win7旗舰版系统安装
  • usbmonit.exe - usbmonit是什么进程
  • centos查找目录命令
  • helppane是什么应用程序
  • 笔记本摄像头摄像
  • win8电脑d盘不见了怎么恢复
  • win8自启动在哪儿设置
  • 如何配置无线网络路由器
  • bootstrap轮播插件
  • 用python编写登录程序
  • 批处理文件(.bat)怎么写?
  • bash脚本加密
  • python中的字典怎么用
  • unity 3d教程
  • 完美解决usb电涌15秒后关机
  • unity地形图片
  • html微信
  • android 开源
  • js继承的方法
  • 福建省国税局
  • 2023年四川职工医保缴费基数
  • 企业未代扣代缴个税能退税吗
  • 山西国税电子税务局电话
  • 湖南省株洲市税务局
  • 重庆国家税务局发票流向查询
  • 中国税务客服工作时间
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设