uniapp中设置轮播图

实现：在uniapp中设置轮播图

先看效果图

找不到现成的接口，先在网上找几张图片，为了防链接失效，直接把图片传到文章里，文章在图就在

https://img-blog.csdnimg.cn/img_convert/ec13b1d884b422ad6ac1746504fa0454.png

https://img-blog.csdnimg.cn/img_convert/462ba175388a6005201d8a73f186c527.png

https://img-blog.csdnimg.cn/img_convert/213a362a143bd47b8b4e3dad5138d53d.png

帅气的图片就是这么超大张

用的是HBuilder X 3.1.7

建项目可以随便建，也可以参考这篇文章

https://blog.csdn.net/yougcave/article/details/116666640

建好后先复制上面三张大图的链接保存到index.vue的data数组swipers里

<script>export default {data() {return {swipers:['https://img-blog.csdnimg.cn/img_convert/ec13b1d884b422ad6ac1746504fa0454.png','https://img-blog.csdnimg.cn/img_convert/462ba175388a6005201d8a73f186c527.png','https://img-blog.csdnimg.cn/img_convert/213a362a143bd47b8b4e3dad5138d53d.png',]}},}
</script>

然后在index.vue里开始写代码

uniapp有个现成的轮播图组件 swiper 而且自带了不少属性，查表就能写

<template><view class="home"><!--circular用来设置循环轮播   indicator-dots设置下面小圆点用来点击 --><swiper circular indicator-dots><!-- v-for循环遍历数组 --><swiper-item v-for="item in swipers" ><image :src="item"></image></swiper-item></swiper></view>
</template>

最后在CSS里改下图片大小就完事了

<!-- 开启scss -->
<style lang="scss">.home{swiper{width: 750rpx;height: 470rpx;image{width: 100%;height: 100%;}}}
</style>

这个挺简单，完事，记住uniapp里有个swiper组件就好了

uniapp中设置轮播图相关推荐

【uniapp】3d轮播图/堆叠轮播图/层叠轮播图
前言 uniapp 3d轮播图 uniapp实现3D轮播图从uniapp插件市场下载插件:https://ext.dcloud.net.cn/plugin?id=243#detail 操作步骤导入 ...
利用swiper在vue中做轮播图，并改变轮播图的原有箭头、图片等内容
目标:利用swiper在vue中做轮播图,并改变轮播图的原有箭头.图片等内容. 实现效果:1.点击左右箭头可切换图片. 2.点击后图片出现最左侧样式效果,只有被点击的图片有此效果,不被点击恢复默认效果 ...
vue --- mintUI中Swipe(轮播图)的使用
引入 // main.js // 导入包 import { Swipe, SwipeItem } from 'mint-ui'// 注册 Vue.component(Swipe.name, Swipe ...
页面中实现轮播图效果
html部分代码 <div class="imgbox" id="imgbox"><div class="inner"&g ...
uniapp卡片式轮播图——uView
1.下载安装uView uView2.0重磅发布,利剑出鞘,一统江湖 - DCloud 插件市场 2.在项目根目录中的main.js中,引入并使用uView的JS库,注意这两行要放在import Vu ...
uniapp 小程序轮播图左右两边显示一部分图片
 <swiper class="banner-container" indicator-dots="true" aut ...
在css中插入轮播图，结果显示图片到处乱跑，不在一个框子内
轮播图显示图片到处乱跑,不在一个框子内,这个该怎么办,想让它在页面左边.
html中简单轮播图实现原理,常见轮播效果及其实现原理
常见轮播效果及其实现原理说明: 本项目只做最基础的原理分析与最简单的应用场景. 1. 简单做法:css定位 + js滑动动画思路: 在同一个父容器内, 1. 通过改变父容器的`left` 值实现- ...
HTML中jquery轮播图旋转,jquery 3d轮播图制作方法 (实现旋转轮播图)
/*轮播*/ .lb_gl{margin-bottom: 30px;background: url(../images/bg_3d.png);background-size: 100% 100%;he ...

uniapp中设置轮播图

uniapp中设置轮播图相关推荐

最新文章

热门文章