uniapp 学习笔记六 swiper轮播图及自定义配置

小咪咪 2024-04-08 12:53 90阅读 0赞

![1074d7fbe5c84e479e1f24e36587f1c7.png][]

<template>
        <view>
            
            <nav-custom></nav-custom>
            
            <swiper class="banner" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
                <swiper-item v-for="(index,item) in 3">
                    <image src="../../static/logo.png" mode=""></image>
                </swiper-item>
            </swiper>
        </view>
    </template>
    
    <script>
        export default {
            data() {
                return {
                    
                }
            },
            methods: {
                
            }
        }
    </script>
    
    <style lang="scss">
        .banner{
            height: 1000upx;
            swiper-item{
                height: 1000upx;
            }
            image{
                width: 100%;
                height:1000upx
            }
        }
    .title{
        color: red;
    }
    </style>

[1074d7fbe5c84e479e1f24e36587f1c7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/799e7f7949614655a333715bfe698287.png

发表评论取消回复

表情：

评论列表（有 0 条评论，90人围观）

还没有评论，来说两句吧...

相关阅读

相关 uniapp 学习笔记六 swiper轮播图及自定义配置

![1074d7fbe5c84e479e1f24e36587f1c7.png][] <template> <view> <!-

小咪咪/ 2024年04月08日 12:53/ 0 赞/ 91 阅读

相关 Vue轮播图（swiper）

Vue轮播图（swiper）注意：swiper版本为5.x.x时，import才能引入成功 1. 在terminal中输入,引入swiper依赖 --

骑猪看日落/ 2023年03月04日 06:46/ 0 赞/ 30 阅读

相关 uniapp轮播图

<template> <view class=""> <swiper class="swiper" :indicator-dots="indica

ゝ一世哀愁。/ 2023年01月11日 09:10/ 0 赞/ 164 阅读

相关 uni-app swiper轮播图

swiper详细数据参照uni-app官方[swiper属性][swiper]  <uni-swiper-dot :inf

系统管理员/ 2022年11月27日 08:56/ 0 赞/ 314 阅读

相关 swiper轮播图

> swiper中只能放swiper-item > `block` 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。 <swiper

妖狐艹你老母/ 2022年09月05日 02:00/ 0 赞/ 256 阅读

相关 Tab切换Swiper轮播图

Swiper对于各位前端的朋友实在是福音，不仅开源，最关键但是好用。 Swiper地址：[http://www.swiper.com.cn/][http_www.swiper

缺乏、安全感/ 2022年05月24日 07:42/ 0 赞/ 521 阅读

相关用Swiper实现轮播图

任务描述本关任务：用Swiper实现一个轮播图。效果如下： ![196943][] 相关知识为了完成本关任务，你需要掌握：1.swiper基本的HTMl结构，2

╰+哭是因爲堅強的太久メ/ 2022年04月04日 11:58/ 0 赞/ 377 阅读

相关自定义轮播图

![20190430101837962.png][] <view class="swiper-container"> <swiper

谁借莪１个温暖的怀抱￠/ 2021年09月19日 04:20/ 0 赞/ 350 阅读

相关 uniapp 轮播图

<swiper indicator-dots 是否添加圆点指示器 circular 是否可以循环滑动 autoplay 自动轮播

我就是我/ 2021年07月24日 13:10/ 0 赞/ 698 阅读

相关用Swiper实现轮播图

用Swiper实现轮播图任务描述相关知识搭建Swiper环境代码文件任务描述本关任务：用Swiper实现一

系统管理员/ 2021年06月24日 13:58/ 0 赞/ 580 阅读