源码:

<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. 分享1-3年经验的Java面试

    最近的温度真是一路的飙升啊,出个门实属不易,但是还是有所收获滴,趁着今天不忙,赶紧给大家分享一波Java面经,对于想去BAT大公司的面试者来说,我这里可能不太合适,深度或许不够,但是对于刚毕业或者有1 ...

  2. MacOS系统(M1/M2)安装AI绘画StableDiffusion保姆级教程

    安装完成后,推荐阅读这篇教程:AI绘画:Stable Diffusion 终极炼丹宝典:从入门到精通 实操环境: macOS 13 Arm64(建议12以上的系统使用) Apple M1 先来看几个样 ...

  3. Got permission denied while trying to connect to the Docker daemon socket at unix:///var/run/docker.so

    在安装Docker以后,执行命令出现错误. Got permission denied while trying to connect to the Docker daemon socket at u ...

  4. 蚂蚁集团混沌工程 ChaosMeta V0.5 版本发布

    混沌工程 ChaosMeta 的全新版本 V0.5 现已正式发布!该版本包含了许多新特性和增强功能,为用户提供了支撑混沌工程各个阶段的平台能力,以及降低使用门槛的用户界面. ChaosMeta V0. ...

  5. utils工具类整理

    闲暇之余,整理出了项目中常用的一些工具类,不是很全,后续会持续更新--- 全部代码请移植github哦-github地址:https://github.com/yang302/utils

  6. ps--提升字体排版的美感四个有效方法

    一,文字的摆放位置 (字体的选择不要超过三种,分散注意力)

  7. .NET Core 实现Excel的导入导出

    目录 前言 NPOI简介 一.安装相对应的程序包 1.1.在 "管理NuGet程序包" 中的浏览搜索:"NPOI" 二.新建Excel帮助类 三.调用 3.1. ...

  8. Java 队列Queue的一些基本操作与概念!!!!!!!!

    首先Java中的队列(Queue)是一种先进先出的数据结构. 其中常见的一些基本操作与方法,包括: 1.创建队列对象.例如:ArrayDeque.LinkedList等. 2.入队操作.将元素添加到队 ...

  9. CF451B

    题目简化和分析: 这题就是判断将一段翻转后是否能变为升序的数组. 我的方法是保存原数组每一个数出现的位置(相同任意一个),让后另外用一个数组存储排好序后的原数组,逐一进行比较. 若同,则跳到下一个元素 ...

  10. 什么是yaml格式与json格式

    什么是yaml格式与json格式 yaml格式:文件名格式以 .yml .yaml 为后缀,用 空格 缩进表示字段的层级关系,可读性高,易于人类管理 yaml格式 布尔值类型:只有在是true/fal ...