位置: 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)(兰斯洛特)

  • 微信公众号运营者如何涨粉丝(微信公众号运营推广方案)

    微信公众号运营者如何涨粉丝(微信公众号运营推广方案)

  • 手机APP推广策略有哪些?(app推广举措)

    手机APP推广策略有哪些?(app推广举措)

  • 华为mate30pro屏幕多大尺寸(华为mate30pro屏幕碎了值得修吗)

    华为mate30pro屏幕多大尺寸(华为mate30pro屏幕碎了值得修吗)

  • 华为p30特殊功能(华为p30特殊功能怎么用)

    华为p30特殊功能(华为p30特殊功能怎么用)

  • 支付宝付款提示打开飞行模式(支付宝付款提示超限怎么办)

    支付宝付款提示打开飞行模式(支付宝付款提示超限怎么办)

  • 苹果7感叹号无服务(苹果7感叹号无服务蜂窝数据错误)

    苹果7感叹号无服务(苹果7感叹号无服务蜂窝数据错误)

  • 被qq好友屏蔽了,怎么显示的(被qq好友屏蔽了怎么恢复正常)

    被qq好友屏蔽了,怎么显示的(被qq好友屏蔽了怎么恢复正常)

  • 大王卡可以申请微信吗(大王卡可以申请几张)

    大王卡可以申请微信吗(大王卡可以申请几张)

  • 普通usb线能改ttl吗(usb口改typec)

    普通usb线能改ttl吗(usb口改typec)

  • 陌陌举报人会被对方知道吗(陌陌举报别人后果)

    陌陌举报人会被对方知道吗(陌陌举报别人后果)

  • qq的屏幕分享是什么(qq屏幕分享有风险吗)

    qq的屏幕分享是什么(qq屏幕分享有风险吗)

  • ios12和13区别(ios12ios13区别)

    ios12和13区别(ios12ios13区别)

  • 苹果第一页搜索怎么关(iphone第一页搜索编辑)

    苹果第一页搜索怎么关(iphone第一页搜索编辑)

  • 手机qq邮箱怎么发视频(手机qq邮箱怎么获取授权码)

    手机qq邮箱怎么发视频(手机qq邮箱怎么获取授权码)

  • wps怎么搜关键词(wps在哪搜索关键词)

    wps怎么搜关键词(wps在哪搜索关键词)

  • 爱奇艺vip能几个人用(爱奇艺VIP能几个设备登录)

    爱奇艺vip能几个人用(爱奇艺VIP能几个设备登录)

  • 硬盘有盘符但不显示空间(硬盘有个盘符无法识别怎么修复)

    硬盘有盘符但不显示空间(硬盘有个盘符无法识别怎么修复)

  • 如何查看系统日志(如何查看系统日志的Id)

    如何查看系统日志(如何查看系统日志的Id)

  • 苹果手机怎么设置响铃模式(苹果手机怎么设置密码锁屏)

    苹果手机怎么设置响铃模式(苹果手机怎么设置密码锁屏)

  • 怎么用函数公式从身份证号里提出出生日期(怎么用函数公式提取其他表中的名称与本表中没有的名称)

    怎么用函数公式从身份证号里提出出生日期(怎么用函数公式提取其他表中的名称与本表中没有的名称)

  • win10输完密码一直转圈(win10输完密码一直转圈圈安全模式进不去)

    win10输完密码一直转圈(win10输完密码一直转圈圈安全模式进不去)

  • 抖音怎么看私信我消息(抖音怎么看私信对方是否看过)

    抖音怎么看私信我消息(抖音怎么看私信对方是否看过)

  • 华为plktl01h全网通吗(华为plk-ul00)

    华为plktl01h全网通吗(华为plk-ul00)

  • iphone11支持动态壁纸吗(苹果11有动态照片吗)

    iphone11支持动态壁纸吗(苹果11有动态照片吗)

  • kindle横屏竖屏怎么切换(kindle 横屏)

    kindle横屏竖屏怎么切换(kindle 横屏)

  • 微信可以发实况照片吗(微信可以发实况图吗朋友圈)

    微信可以发实况照片吗(微信可以发实况图吗朋友圈)

  • 巴塞罗那城市上空,西班牙 (© SW Photography/Getty Images)(巴塞罗那城市布局)

    巴塞罗那城市上空,西班牙 (© SW Photography/Getty Images)(巴塞罗那城市布局)

  • 进项税额转出会影响利润吗
  • 培训学校可以不可以用燃气取暖炉
  • 个体工商户生产经营所得税税率表2021
  • 免抵退税额如何填报
  • 加计抵扣进项税进营业外收入
  • 去新成立的公司
  • 营改增以前土地交易应交税费
  • 公司之间房产过户免税条件
  • 超标的职工教育经费为什么是可抵扣
  • 评估所得征税方法是一种控制纳税人逃税和避税的措施
  • 零余额账户收到钱怎么办
  • 材料采购发生的合理损耗计入
  • 货款和发票金额不符
  • 单位购买食品饮料的进项税可以抵扣吗?
  • 个体工商户库存商品入账
  • 收费公路通行费增值税电子普通发票
  • 关联交易的解释
  • 幼儿园收的餐费必须与食谱做平账怎么调账
  • 分公司需要计提利息吗
  • 餐饮发票是普票能报销么
  • 季度申报利润表怎么填
  • 出口退税的计算题
  • 现金日记账如何结账
  • 营改增后兼营非应税劳务的税务处理怎么做?
  • 出口货物怎么开具发票
  • 机动车抵扣联是什么
  • 购买原材料的运费属于什么费用
  • 怎么把公司账户的钱转到个人账号
  • 压缩包损坏修复软件
  • 工会经费,职工福利费,教育经费的扣除标准
  • 评估报告怎么算合法
  • 对数据文件操作,进行数据记录的交换都要经过
  • 微信获取用户id失败如何解决
  • 巴拉诺维奇市
  • phpunicode
  • 记账凭证账务处理步骤
  • opencv如何使用
  • 采购周转材料会计分录怎么写
  • php使用自定义函数的方式
  • 一维频率分布表
  • elementui form rules
  • elementui怎么样
  • laravel event
  • wordpress怎么用
  • 运费已付发票未到会计分录
  • 广告公司纳税人类型
  • 加工费能直接抵税吗
  • 购买银行短期理财产品的会计处理
  • 小企业会计准则主要按照什么计量
  • 小规模纳税人三减一政策
  • SQL Sever 2005 Express 安装失败解决办法
  • 个体工商户纳税人类型怎么填
  • 建筑业挂靠企业所得税如何收取?
  • 车辆保险发票一般在哪开
  • 小规模纳税人去银行开立什么账户
  • 收到预付卡的发票是否可以报销呢?
  • 固定资产到期出售 合同
  • 未分配利润科目余额在借方还是贷方
  • 报关代理费进成本吗
  • 购入的技术服务作为成本
  • 单位的对公账户有利息吗
  • 注册资金未缴齐怎么处理
  • 现金支付中的现金是什么
  • 电子税务局申报流程
  • 研发费用账务处理实例
  • 建筑机械使用安全规范最新版
  • MySql 5.6.35 winx64 安装详细教程
  • mac自带的看图软件怎么使用
  • win10怎么安装网络驱动程序
  • 苹果怎么格式化彻底
  • reald是什么格式
  • win7一直处于开机界面
  • win10连热点无网络
  • 电脑微软拼音输入法
  • require注解
  • 学习计划
  • javascript定律
  • idea 分析源码
  • js拖拽div
  • 经纪代理服务税率是多少 1%
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设