源码:

<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. ENVI+ERDAS实现Hyperion叶绿素含量反演:经验比值法、一阶微分法

    本文介绍基于ENVI与ERDAS软件,依据Hyperion高光谱遥感影像,采用经验比值法.一阶微分法等,对叶绿素含量等地表参数加以反演的具体操作. 目录 1 前期准备与本文理论部分 1.1 几句闲谈 ...

  2. 银河麒麟SP2 auditd服务内存泄露问题

    这几天遇到基于海光服务器的银河麒麟V10 SP2版本操作系统出现内存无故增长问题. 排查发现auditd服务,占用了大量内存. 我的环境是银河麒麟V10 SP2 524,audit版本audit-3. ...

  3. 如何对MongoDB进行测试

    一.环境搭建 关于环境搭建,最好的搭建方式,当然是脚本一键式搭建 我这里是centos6 x64版本的linux上进行构建,这个linux版本现在应该是大部分的主流服务器的标配版本 下面是安装脚本的编 ...

  4. nmcli 命令设置网络

    nmcli 命令设置网络 设置静态 IP 地址 sudo nmcli connection modify "连接名称" ipv4.addresses IP地址/子网掩码 设置网关 ...

  5. LeetCode 周赛上分之旅 #47 前后缀分解结合单调栈的贡献问题

    ️ 本文已收录到 AndroidFamily,技术和职场问题,请关注公众号 [彭旭锐] 和 BaguTree Pro 知识星球提问. 学习数据结构与算法的关键在于掌握问题背后的算法思维框架,你的思考越 ...

  6. 10. 用Rust手把手编写一个wmproxy(代理,内网穿透等), HTTP内网穿透支持修改头信息

    用Rust手把手编写一个wmproxy(代理,内网穿透等), HTTP内网穿透支持修改头信息 项目 ++wmproxy++ gite: https://gitee.com/tickbh/wmproxy ...

  7. 想让你的代码简洁,试试这个SimpleDateFormat类高深用法

    本文分享自华为云社区<从入门到精通:SimpleDateFormat类高深用法,让你的代码更简洁!>,作者:bug菌. 环境说明:Windows 10 + IntelliJ IDEA 20 ...

  8. 基于LangChain的LLM应用开发3——记忆

    此情可待成追忆,只是当时已惘然.我们人类会有很多或美好或痛苦的回忆,有的回忆会渐渐模糊,有的回忆午夜梦醒,会浮上心头. 然而现在的大语言模型都是没有记忆的,都是无状态的,大语言模型自身不会记住和你对话 ...

  9. js数据结构--集合

    <!DOCTYPE html> <html> <head> <title></title> </head> <body&g ...

  10. .NET中的数组在内存中如何布局?

    总的来说,.NET的值类型和引用类型都映射一段连续的内存片段.不过对于值类型对象来说,这段内存只需要存储其字段成员,而对应引用类型对象,还需要存储额外的内容.就内存布局来说,引用类型有两个独特的存在, ...