源码:

<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. Unity UGUI的Image(图片)组件的介绍及使用

    UGUI的Image(图片)组件的介绍及使用 1. 什么是UGUI的Image(图片)组件? UGUI的Image(图片)组件是Unity引擎中的一种UI组件,用于显示2D图像.它提供了一种简单而灵活 ...

  2. dotnet SemanticKernel 入门 自定义变量和技能

    本文将告诉大家如何在 SemanticKernel 框架内定义自定义的变量和如何开发自定义的技能 本文属于 SemanticKernel 入门系列博客,更多博客内容请参阅我的 博客导航 自定义变量是一 ...

  3. SpringBoot获取树状结构数据-SQL处理

    前言 在开发中,层级数据(树状结构)的获取往往可能是我们一大难点,我现在将自己获取的树状结构数据方法总结如下,希望能给有需要的小伙伴有所帮助! 一.测试数据准备 /* Navicat Premium ...

  4. 【项目源码】JavaWeb网上购书系统

    JavaWeb网上购书系统 介绍 采用JSP.Servlet.MySQL.Tomcat8.0开发的网上购书系统. 软件架构 网上书城主要功能如下: (1) 前台(客户购买)部分: ① 用户管理:注册会 ...

  5. git Failed to connect to 127.0.0.1 port xxxx: Connection refused 的问题。

    问题描述在使用 git 拉取.提交代码的时候,会出现 git Failed to connect to 127.0.0.1 port xxxx: Connection refused 的问题. 原因: ...

  6. docker入门加实战—docker数据卷

    docker入门加实战-docker数据卷 容器是隔离环境,容器内程序的文件.配置等都在容器的内部,要读写容器内的文件非常不方便. 因此,容器提供程序的运行环境,但是程序运行产生的数据.程序运行依赖的 ...

  7. 解密Prompt系列17. LLM对齐方案再升级 WizardLM & BackTranslation & SELF-ALIGN

    话接上文的指令微调的样本优化方案,上一章是通过多样性筛选和质量过滤,对样本量进行缩减,主打经济实惠.这一章是通过扩写,改写,以及回译等半监督样本挖掘方案对种子样本进行扩充,提高种子指令样本的多样性和复 ...

  8. 入门篇-其之六-Java运算符(中)

    祝所有程序员,1024节日快乐!!! 一.自增/自减运算符 假设有一个变量intValue的值为10,如果想让这个值加1,有哪些方式? 首先,我们可以使用最原始的方式: int intValue = ...

  9. Net 高级调试之二:CLR和Windows加载器及应用程序域介绍

    一.简介 今天是 Net 高级调试的第二篇文章,第一篇文章记录了自己学习 Net 高级调试的第一步,认识一些调试工具,有了工具的倚仗,我们开始仗剑走天涯了,开始Net 高级调试正式的征程了.我先说一下 ...

  10. select...for update到底是加了行锁,还是表锁?

    前言 前几天,知识星球中的一个小伙伴,问了我一个问题:在MySQL中,事务A中使用select...for update where id=1锁住了,某一条数据,事务还没提交,此时,事务B中去用sel ...