源码:

<template>
    
        <viex class="out">    
        <view class="box">div</view>
        <view class="block"></view>
        <icon type="success" size="26"></icon>
        <icon type="waiting" size="26"></icon>
        <view>uniapp</view>
        <view>web前端开发</view>
        <text user-select selectable=>nodejs span</text>
        <text space="emsp" decode>vue</text>
        <scroll-view class="scroll" scroll-x scroll-y>
            <view class="group">
                <view class="item">
                    111
                </view>
                <view class="item">
                    111
                </view>
                <view class="item">
                    111
                </view>
                <view class="item">
                    111
                </view>
                <view class="item">
                    111
                </view>
                <view class="item">
                    111
                </view>
            </view>
        </scroll-view>
        <swiper class="swiper" circular autoplay interval="3000" duration="1000">
            <swiper-item class="item">
                <image src="../../static/25-1G115103JD30.jpg" mode=""></image>
            </swiper-item>
            <swiper-item class="item">
                <image src="../../static/165804312036816580431202.jpg" mode=""></image>
            </swiper-item>
            <swiper-item class="item">
                <image src="../../static/logo.png" mode=""></image>
            </swiper-item>
        </swiper>
            
            </viex>
</template>

<script>
    export default {
        
    }
</script>

<style lang="scss">
    .out{
        .box{
            width: 200rpx;
            height: 220rpx;
            background:pink;
        }
        .block{
            width: 750rpx;
            height: 200rpx;
            background-color: black;
            
        }
        
    }
    .scroll{
        height: 100rpx;
        width: 220rpx;
        border: 1px solid red;
        box-sizing:border-box;
        .group{
            white-space: nowrap;
            .item{
                width: 220rpx;
                height: 220rpx;
                background-color: royalblue;
                display: inline-block;
                margin-right: 10rpx;
            }
        }
    }
    .swiper{
        
    }
    
</style>

属性:

swiper:属性:image

scroll-view和swiper的使用的更多相关文章

  1. scroll calendar & scroll view

    scroll calendar & scroll view https://taro-docs.jd.com/taro/docs/components/viewContainer/scroll ...

  2. NGUI之scroll view制作,以及踩的坑总结

    http://blog.csdn.net/monzart7an/article/details/23878505 链接: http://game.ceeger.com/forum/read.php?t ...

  3. NGUI例子Scroll View场景中item添加点击后自动滑到终点

    http://blog.csdn.net/luyuncsd123/article/details/22914497 最近在做一个项目的UI,需求是1.拖动items后当永远有一个item保存在中间位置 ...

  4. NGUI系列教程十(Scroll View实现触摸滚动相册效果)

    NGUI中提供了两种Scroll View 一种是通过手指或鼠标滑动视图时移动平面物体,另一种则是直接移动摄像机,他们各有各的好处.但是NGUI提供的Scroll View很难实现类似Android ...

  5. Scroll view 备忘

    Stroyboard中使用ScrollView 当我们使用Storyboard开发项目时,如果要往控制器上拖入一个ScrollView并且添加约束设置滚动区域,是有特殊的规定的: 拖入一个scroll ...

  6. Unity NGUI制作scroll view

    unity版本:4.5 NGUI版本:3.6.5 参考链接:http://blog.csdn.net/monzart7an/article/details/23878505,作者:CSDN 冬菊子   ...

  7. Scroll View 控件以Thumbnail的方式显示一个目录的全部图片,相似图片浏览器

    MAC : XCode -> Scroll View 控件以Thumbnail的方式显示一个目录的全部图片,类似图片浏览器 STEP1:将两个目录复制到project里面ImageBrowser ...

  8. Scroll View 深入

    转载自:http://mobile.51cto.com/hot-430409.htm 可能你很难相信,UIScrollView和一个标准的UIView差异并不大,scroll view确实会多一些方法 ...

  9. 全面理解iOS开发中的Scroll View[转]

    from:http://mobile.51cto.com/hot-430409.htm 可能你很难相信,UIScrollView和一个标准的UIView差异并不大,scroll view确实会多一些方 ...

  10. (转)ngui3.5.7 版本Scroll View实现方法

    原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://xyo123.blog.51cto.com/6369437/1405861 现在网 ...

随机推荐

  1. 提高 Web 开发效率的10个VS Code扩展插件,你知道吗?

    前言 一个出色的开发工具可以显著提高开发人员的开发效率,而优秀的扩展插件则能更进一步地提升工具的效率.在前端开发领域,VSCode毫无疑问是目前最受欢迎的开发工具.为了帮助前端开发人员提高工作效率,今 ...

  2. 「codeforces - 1674F」Madoka and Laziness

    link. 如果做过 codeforces - 1144G 那这题最多 *2200. 序列中的最大值必然为其中一个拐点,不妨设 \(a_p = a_\max\),先讨论另一个拐点 \(i\) 在 \( ...

  3. 如何快速找到win10系统中的开机启动文件所在路径

    在网站系统开发过程中,我们会遇到一些服务器下线导致的网站无法打开的情况,就需要重启服务器,如果每次手动去操作,实在是很繁琐,所以咱们可以利用开机自启的方式.而要这样设置的话,就需要找到开机自启的目录, ...

  4. c语言代码练习6

    //输入三个数字,依次按照从大到小输出#define _CRT_SECURE_NO_WARNINGS 1 #include <stdio.h> int main() { int a = 0 ...

  5. Python基础——字符编码、文件处理

    文章目录 字符编码 一 引入 二 知识储备 2.1 三大核心硬件 2.2 文本编辑器读取文件内容的流程 2.3 python解释器执行文件的流程 2.4 总结 三.字符编码介绍 3.1 什么是字符编码 ...

  6. 循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(7) -- 图标列表展示和选择处理

    我们在WPF应用端的界面中,使用lepoco/wpfui 来做主要的入口框架,这个项目它的菜单内置了不少图标,我们需要在动态菜单的配置中,使用它作为图标的展示处理,本篇随笔介绍如何基于图标枚举集合进行 ...

  7. [ABC212E] Safety Journey 题解

    Safety Journey 题目大意 给定一张缺少了 \(m\) 条边的 \(n\) 个点的完全图和一个正整数 \(k\),你需要求出满足以下条件的序列 \(A\) 的数量: \(A\) 的长度为 ...

  8. 文心一言 VS 讯飞星火 VS chatgpt (118)-- 算法导论10.3 3题

    三.用go语言,在ALLOCATE-OBJECT和 FREE-OBJECT过程的实现中,为什么不需要设置或重置对象的 prev 属性呢? 文心一言: 在 Go 语言中,ALLOCATE-OBJECT ...

  9. SSH 免秘钥登录

    yum -y install expect ssh-keygen -t rsa -P "" -f /root/.ssh/id_rsa for i in 192.168.1.11 1 ...

  10. Kafka 在分布式系统中的 7 大应用场景

    Kafka 介绍 Kafka 是一个开源的分布式流式平台,它可以处理大量的实时数据,并提供高吞吐量,低延迟,高可靠性和高可扩展性.Kafka 的核心组件包括生产者(Producer),消费者(Cons ...