uniapp实战 —— 轮播图【数字下标】(含组件封装,点击图片放大全屏预览)

在这里插入图片描述

组件封装

src\components\SUI_Swiper2.vue

<script setup lang="ts">
import { ref } from 'vue'
const props = defineProps({
  config: Object,
})

const activeIndex = ref(0)
const change: UniHelper.SwiperOnChange = (e) => {
  activeIndex.value = e.detail.current
}

// 点击图片时
const onTapImage = (url: string) => {
  // 大图预览
  uni.previewImage({
    current: url,
    urls: props.config?.itemList,
  })
}
</script>

<template>
  <view class="preview">
    <swiper
      @change="change"
      :circular="props.config?.circular || true"
      :autoplay="props.config?.autoplay || false"
      :interval="props.config?.interval || 3000"
    >
      <swiper-item v-for="(item, index) in props.config?.itemList" :key="index">
        <image @tap="onTapImage(item)" mode="aspectFill" :src="item" />
      </swiper-item>
    </swiper>
    <view class="indicator">
      <text class="current">{{ activeIndex + 1 }}</text>
      <text class="split">/</text>
      <text class="total">{{ props.config?.itemList.length }}</text>
    </view>
  </view>
</template>

<style lang="scss">
.preview {
  height: 750rpx;
  position: relative;
  .image {
    width: 750rpx;
    height: 750rpx;
  }
  .indicator {
    height: 40rpx;
    padding: 0 24rpx;
    line-height: 40rpx;
    border-radius: 30rpx;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    background-color: rgba(0, 0, 0, 0.3);
    position: absolute;
    bottom: 30rpx;
    right: 30rpx;
    .current {
      font-size: 26rpx;
    }
    .split {
      font-size: 24rpx;
      margin: 0 1rpx 0 2rpx;
    }
    .total {
      font-size: 24rpx;
    }
  }
}
</style>

页面使用

src\pages\goods\goods.vue

<SUI_Swiper2 :config="swiperConfig" />
let swiperConfig = ref({ itemList: [] })

// 获取商品详情信息
const goods = ref<GoodsResult>()
const getGoodsByIdData = async () => {
  const res = await getGoodsByIdAPI(query.id)
  goods.value = res.result
  swiperConfig.value = {
    itemList: goods?.value.mainPictures,
  }
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/230946.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

小红书品牌投放须知,家居产品软文怎么写?

家居产品软文&#xff0c;是一种展示家居产品的文案写作形式。优秀的家居产品软文能够通过引人入胜的文字&#xff0c;吸引受众的注意力并激发他们选购家居产品的兴趣。今天我们来为大家分享一下小红书品牌投放须知&#xff0c;家居产品软文怎么写&#xff1f; 一、关键词布局 …

[mysql]linux安装mysql5.7

之前安装的时候遇到了很多问题&#xff0c;浪费了一些时间。整理出这份教程&#xff0c;照着做基本一遍过。 这是安装包: 链接&#xff1a;https://pan.baidu.com/s/1gBuQBjA4R5qRYZKPKN3uXw?pwd1nuz 1.下载安装包&#xff0c;上传到linux。我这里就放到downloads目录下面…

认知觉醒(六)

认知觉醒(六) 第二节 感性&#xff1a;顶级的成长竟然是“凭感觉” 人类生存于世&#xff0c;比拼的是脑力思维&#xff0c;但极少有人知道&#xff0c;我们的身体里还有一个更高级的系统&#xff0c;若能善用&#xff0c;成就非凡。 1941年&#xff0c;德军对英国本土进行…

十二、MapReduce概述

1、MapReduce &#xff08;1&#xff09;采用框架 MapReduce是“分散——>汇总”模式的分布式计算框架&#xff0c;可供开发人员进行相应计算 &#xff08;2&#xff09;编程接口&#xff1a; ~Map ~Reduce 其中&#xff0c;Map功能接口提供了“分散”的功能&#xff…

ChatGPT新媒体运营神器:轻松驾驭内容创作与传播

文章目录 1. 内容创作2. 社交媒体管理3. 用户互动与客户服务 《巧用ChatGPT轻松玩转新媒体运营》内容简介作者简介目录前言/序言本书内容本书特色本书读者对象获取方式 随着互联网的高速发展&#xff0c;新媒体已经成为了人们获取信息、交流思想的重要渠道。在这个信息爆炸的时…

Spring cloud - gateway

什么是Spring Cloud Gateway 先去看下官网的解释&#xff1a; This project provides an API Gateway built on top of the Spring Ecosystem, including: Spring 6, Spring Boot 3 and Project Reactor. Spring Cloud Gateway aims to provide a simple, yet effective way t…

面试题之Docker篇

1、Docker 是什么&#xff1f; Docker一个开源的应用容器引擎&#xff0c;是实现容器技术的一种工具&#xff0c;让开发者可以打包他们的应用以及环境到一个镜像中&#xff0c;可以快速的发布到任何流行的操作系统上。 2、Docker的三大核心是什么? 镜像&#xff1a;Docker的镜…

MBD Introduction

介绍 MATLAB是MathWorks公司的商业数学软件&#xff0c;应用于科学计算、可视化以及交互式程序设计等高科技计算环境。Simulink是MATLAB中的一种可视化仿真工具。 Simulink是一个模块图环境&#xff0c;用于多域仿真以及基于模型的设计。它支持系统设计、仿真、自动代码生成以…

openGauss学习笔记-144 openGauss 数据库运维-例行维护-慢sql诊断

文章目录 openGauss学习笔记-144 openGauss 数据库运维-例行维护-慢sql诊断144.1 背景信息144.2 前提条件 openGauss学习笔记-144 openGauss 数据库运维-例行维护-慢sql诊断 144.1 背景信息 在SQL语句执行性能不符合预期时&#xff0c;可以查看SQL语句执行信息&#xff0c;便…

【Linux】tmux简单使用

它允许你在一个终端窗口中创建多个终端会话&#xff0c;并在它们之间进行切换。以下是tmux的一些主要用途和功能&#xff1a; 多窗口&#xff1a; Tmux允许你在一个终端中创建多个窗口。每个窗口可以包含一个或多个终端会话&#xff0c;你可以轻松地在这些窗口之间切换。面板分…

Helio 升级为 LISTA DAO,开启多链时代新篇章并宣布积分空投计划

Helio Protocol 是 BNB Chain 上排名第一的去中心化稳定币协议&#xff0c;其推出的超额抵押和清算机制支持的去中心化稳定币 HAY&#xff0c;在 BNB Chain 有非常广泛的应用&#xff0c;包括流动性挖掘、质押、交易、储值等&#xff01; 2023 年 7 月&#xff0c;Helio Protoc…

python基于DeeplabV3Plus开发构建手机屏幕表面缺陷图像分割识别系统

Deeplab是图像分割领域非常强大的模型&#xff0c;在前面的博文中我们也进行过很多相应项目的开发实践&#xff0c;感兴趣的话可以自行移步阅读即可&#xff1a; 《基于DeepLabv3Plus开发构建人脸人像分割系统》 《基于DeepLabV3实践路面、桥梁、基建裂缝裂痕分割》 《基于D…

金蝶 Apusic 应用服务器任意文件上传漏洞

声明 本文仅用于技术交流&#xff0c;请勿用于非法用途 由于传播、利用此文所提供的信息而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c;文章作者不为此承担任何责任。 1. 产品介绍 金蝶 Apusic 是金蝶集团旗下的一款企业级应用服务器&#…

鸿蒙原生应用/元服务开发-新手入门练习心得

1.先根据案例模仿代码&#xff08;页面跳转案例&#xff09; 点击next后跳转页面&#xff0c;点击back返回第一个页面 2.模块化层层拆解代码 先创建了row&#xff0c;一行&#xff0c;在这一行里面写代码&#xff1a; 内容都放到Column中 Text内置组件可以直接引用文本 thi…

前端笔记(四)Flex 布局

标准流 标准流也叫文档流&#xff0c;指的是标签在页面中默认的派不规则&#xff0c;例如&#xff1a;块元素独占一行&#xff0c;行内元素可以一行显示多个。 但是很多的网页布局都是块元素在一行中显示的&#xff0c;这时候就需要浮动和 Flex 布局&#xff0c;浮动只需要了解…

地址栏不安全提示

在使用浏览器时访问网站的时候&#xff0c;我们可能会遇到地址栏提示不安全的情况。这种情况通常都是是由于未安装有效SSL证书或者网站SSL证书过期等原因导致的。本文将介绍如何处理地址栏提示不安全的问题&#xff0c;以确保我们的上网安全。 1&#xff0c;缺少SSL证书&#x…

基于Java SSM框架实现超市进销存购物商城管理系统项目【项目源码+论文说明】

基于java的SSM框架实现超市进销存购物商城管理系统演示 摘要 随着科学技术的飞速发展&#xff0c;社会的方方面面、各行各业都在努力与现代的先进技术接轨&#xff0c;通过科技手段来提高自身的优势&#xff0c;社区生活超市管理系统当然也不能排除在外。社区生活超市管理系统…

TQ2440开发板-按键驱动程序设计

目录 按键测试底板原理图核心板原理图使用轮询方式设计按键程序 按键测试底板原理图 TQ2440开发板有4个用户可编程按键&#xff0c;它们直接与CPU的GPIO相连&#xff0c;低电平触发中断&#xff0c;资源占用如下图所示&#xff1a; 核心板原理图 使用轮询方式设计按键程序 按…

使用FFMPEG转码,转单声道,转标准WAV,转PCM

本文为使用FFMPEG命令行的方式处理音频&#xff0c;来获取想要得到的音频文件。 零、使用命令行查看编码封装信息 格式&#xff1a;ffprobe.exe -show_format inputfile 例子&#xff1a;ffprobe.exe -show_format .\stereo_44_16bit.wav 运行结果为下图&#xff1a; 如图可…