首页 > 编程语言 >小程序 之swiper轮播图

小程序 之swiper轮播图

时间:2023-02-09 10:44:24浏览次数:29  
标签:原图 轮播 程序 高度 默认 height swiper

一、swiper默认样式

1. width 100%

2. height 默认为 150px

3 .swiper高度无法实现由内容撑开

二、设置swiper高度

在默认情况下的高度为150px的轮播图不太好看,所以我们需要给它重新设置高度,如下:

height:calc(750rpx  * 原图的高度/原图的宽度 )

<swiper :indicator-dots="true" indicator-color="white" indicator-active-color="#aabbcc" :autoplay="true" :interval="5000" :duration="1000" style="height: calc(750upx * 280/520);">
    <swiper-item v-for="(item,index)  in banner" :key="index">
        <view class="swiper-item">
            <image :src="item" mode="widthFix" style="width: 100%;"></image>
        </view>
    </swiper-item>
</swiper>

 

标签:原图,轮播,程序,高度,默认,height,swiper
From: https://www.cnblogs.com/yang-2018/p/17104393.html

相关文章

  • 关于小程序游戏变现你该知道的一些事
    提到小程序游戏,大多数人第一印象就是微信小游戏,不过实际上小程序游戏的渠道远不止于此。近期小游戏爆款频出,截至现在,微信小游戏开发者的数量已超过了10万余人次,不得不说现在......
  • ASP+VML制作统计图的源程序
    此程序只能用IE浏览器浏览,根据下面的源程序,我们只是略做修改结合数据库就能实际应用到一些系统中。示例:1、直方图    2、饼图   3、曲线图一、统计图--直方图<script......
  • 关于小程序变现方式你还知道哪些?
    提到小程序游戏,大多数人第一印象就是微信小游戏,不过实际上小程序游戏的渠道远不止于此。近期小游戏爆款频出,截至现在,微信小游戏开发者的数量已超过了10万余人次,不得不说现......
  • vs中程序包源中找不到你要的包
    问提描述:在全部中找不到你要的包,有些包可能没有在用了,解决方案:你可以在网络中直接下载包(或者你的同事有包),然后放到你的程序包源的路径下面1.查看你的程序包都放在了什么......
  • 微信小程序搜索优化指南(SEO)
    前言其实在2019年上半年,微信就发布了基于小程序页面的搜索。为了更好地发现及理解小程序的页面,结合过去一段时间来我们遇到的各种情况,强烈建议各位开发者花一些宝贵的......
  • ORA-12514:TNS:监听程序当前无法识别连接描述符中请求的服务
    使用plsql13连接oracle数据库,报如下错误:   初步判断是监听程序配置出现了问题,解决方法如下:1、检查oracle的监听服务是否运行正常;1)点击键盘的win+r,输入services.ms......
  • vc设置程序版本, 获取程序版本号
    内容摘自网络,在这里写一遍仅留作备份。 VC发布程序时设置版本信息    在windwos资源管理器中,可以查看exe或dll文件的版本信息,那么在使用vc生成exe或dll时如何设......
  • 微信小程序分包
    一、微信小程序--分包1、什么是分包     分包指的是把一个完整的小程序项目,按照需求划分为不同的子包,在构建时打包成不同的分包,用户在使用时按需进行加载。 ......
  • 第十届“图灵杯”NEUQ-ACM程序设计竞赛个人赛
    A签到。C++Code#include<bits/stdc++.h>usingi64=longlong;intmain(){std::ios::sync_with_stdio(false);std::cin.tie(nullptr);......
  • 如何使用 Node.js 和 OpenAI API 快速开发一个私有的 ChatGPT 智能聊天机器人程序 All
    如何使用Node.js和OpenAIAPI快速开发一个私有的ChatGPT智能聊天机器人程序AllInOneOpenAIAPIhttps://platform.openai.com/docs/libraries/node-js-library$......