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

简介: 【uniapp小程序开发】—— 组件封装之【自定义轮播图】

前言:

本文主要展示小程序端封装轮播图组件,使用的是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、完成自定义轮播图效果

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


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表示当前所在滑块的 index
      changeIndicatorDots(e) {
        this.current = e.detail.current
      }
    }
  }
</script>

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


专栏分享:

小程序项目实战专栏:《uniapp小程序开发》

前端面试专栏地址:《面试必看》


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


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


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


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


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


目录
相关文章
|
25天前
|
小程序 前端开发 关系型数据库
基于Uniapp+php校园小程序,校园圈子论坛系统功能,校园跑腿二手交流功能设计
校园圈子论坛及综合服务平台集成了校园跑腿、兼职信息、外卖团购、闲置交换、租赁服务、表白墙等多功能模块,提供一站式校园生活解决方案。系统采用uniapp前端和PHP后端开发,支持多城市、多学校切换,配备分站式后台管理,确保稳定性和安全性。通过融云IM SDK实现即时通讯功能,增强用户互动与粘性。适用于大学校园、城市及社区圈子,满足多样化需求,提升便捷体验。
|
24天前
|
小程序 前端开发 关系型数据库
uniapp跨平台框架,陪玩系统并发性能测试,小程序源码搭建开发解析
多功能一体游戏陪练、语音陪玩系统的开发涉及前期准备、技术选型、系统设计与开发及测试优化。首先,通过目标用户分析和竞品分析明确功能需求,如注册登录、预约匹配、实时语音等。技术选型上,前端采用Uni-app支持多端开发,后端选用PHP框架确保稳定性能,数据库使用MySQL保证数据一致性。系统设计阶段注重UI/UX设计和前后端开发,集成WebSocket实现语音聊天。最后,通过功能、性能和用户体验测试,确保系统的稳定性和用户满意度。
|
28天前
|
前端开发 小程序
uniapp-实现轮播图效果深度总结【建议收藏】
这是一篇关于前端轮播图实现的详细教程,作者通过多个步骤介绍了如何使用 Vue3 和 Swiper 组件创建一个功能丰富的轮播图。
40 1
|
30天前
|
小程序 IDE PHP
圈子源码如何打包生成App小程序/开发一个圈子系统软件所需要的费用体现在哪里?
将PHP源码打包成App的过程涉及多个步骤和技术选择。以圈子源码为例,首先明确需求,确定App功能和目标用户群体,并根据需求开发小程序页面,如用户注册、圈子列表等。源码准备阶段确保源码适用于小程序开发,环境配置需安装IDE(如微信开发者工具)及依赖库。最后在IDE中打包小程序并上传至管理平台,通过审核后发布。费用方面,模板开发成本较低,定制开发则更高,具体取决于需求复杂度和第三方服务费用。
73 0
|
1月前
|
移动开发 小程序 前端开发
超详细攻略!uniapp陪玩系统,打包陪玩小程序、H5需要注意什么?
陪玩系统的打包过程涵盖APP、小程序和H5平台。APP打包需使用uni-app开发工具,配置项目信息并选择云打包;小程序打包需在微信公众平台注册账号并提交审核;H5打包则直接通过uni-app生成文件并上传至服务器。各平台需注意权限配置、代码规范及充分测试,确保应用稳定性和兼容性。
|
28天前
|
移动开发 小程序
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
26 0
|
3月前
|
小程序 前端开发 JavaScript
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
77 0
在线课堂+工具组件小程序uniapp移动端源码
|
4月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
561 3
|
4月前
|
小程序 API
微信小程序更新提醒uniapp
在小程序开发中,版本更新至关重要。本方案利用 `uni-app` 的 `uni.getUpdateManager()` API 在启动时检测版本更新,提示用户并提供立即更新选项,自动下载更新内容,并在更新完成后重启小程序以应用新版本。适用于微信小程序,确保用户始终使用最新版本。以下是实现步骤: ### 实现步骤 1. **创建更新方法**:在 `App.vue` 中创建 `updateApp` 方法用于检查小程序是否有新版本。 2. **测试**:添加编译模式并选择成功状态进行模拟测试。
95 0
微信小程序更新提醒uniapp
|
6月前
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
155 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目

热门文章

最新文章