源码:

<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. 三维模型OSGB格式轻量化重难点分析

    三维模型OSGB格式轻量化重难点分析 在三维模型应用中,为了适应移动设备的硬件和网络限制等问题,OSGB格式轻量化处理已经成为一个重要的技术手段.但是,在实际应用中,OSGB格式轻量化仍然存在着一些重 ...

  2. Midjourney 创建私人画图机器人(保姆级教程)

    本教程收集于:AIGC从入门到精通教程汇总 之前给大家介绍过了Midjourney 的注册教程:AI绘画:Midjourney 注册(保姆级教程) 也有Stable Diffusion(开源)的本地搭 ...

  3. .NET周刊【8月第4期 2023-08-27】

    国内文章 AgileConfig-1.7.0 发布,支持 SSO https://www.cnblogs.com/kklldog/p/agileconfig-170.html AgileConfig ...

  4. 避坑|在读取excel.xlsx文件中的内容时发现明明只有3行,但跑起来却认为有13行,导致有10行None,UI自动化测试代码空跑了10次;|UI自动化测试|数据驱动

    在读取excel.xlsx文件中的内容时发现明明只有3行,但跑起来却认为有13行,导致有10行None,UI自动化测试代码空跑了10次: 原因:excel.xlsx内容清除时用delete快捷键导致, ...

  5. QA|linux指令awk '{print $(NF-1)}'为啥用单引号而不是双引号?|linux

    linux指令awk '{print $(NF-1)}'为啥用单引号而不是双引号? 我的理解: 因为单引号不对会内容进行转义,而双引号会,举个栗子 1 a=1 2 echo "$a" ...

  6. 自定义注解,实现请求缓存【Spring Cache】

    前言 偶尔看到了spring cache的文章,我去,实现原理基本相同,哈哈,大家可以结合着看看. 简介 实际项目中,会遇到很多查询数据的场景,这些数据更新频率也不是很高,一般我们在业务处理时,会对这 ...

  7. RK3568开发笔记(七):在宿主机ubuntu上搭建Qt交叉编译开发环境,编译一个Demo,目标板运行Demo测试

    前言   在之前的博文中已经搭建好了一个比较完善的ubuntu宿主机,都很完善了但是发现没有Qt交叉编译开发环境,所以还需要搭建一套Qt交叉编译开发环境.   补充说明   本篇是基于<RK35 ...

  8. Dubbo3应用开发—Dubbo直连开发相关概念:通信、协议、序列化

    Dubbo RPC直连应用的概念 所谓的Dubbo RPC直连应用,指的就是Consumer直接访问Provider,而无需注册中心的接入. Dubbo完成的仅仅是RPC最基本的功能. 从这个角度Du ...

  9. Redis持久化 (RDB和AOF) 梳理

    Redis有两种持久化方案: RDB持久化 AOF持久化 RDB持久化 RDB全称Redis Database Backup file(Redis数据备份文件),也被叫做Redis数据快照.简单来说就 ...

  10. nginx Ingress Controller Packaged by Bitnami

    环境介绍 节点 master01 work01 work02 主机/ip calico-master01/192.168.195.135 calico-master01/192.168.195.135 ...