scroll-view和swiper的使用
源码:
<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的使用的更多相关文章
- scroll calendar & scroll view
scroll calendar & scroll view https://taro-docs.jd.com/taro/docs/components/viewContainer/scroll ...
- NGUI之scroll view制作,以及踩的坑总结
http://blog.csdn.net/monzart7an/article/details/23878505 链接: http://game.ceeger.com/forum/read.php?t ...
- NGUI例子Scroll View场景中item添加点击后自动滑到终点
http://blog.csdn.net/luyuncsd123/article/details/22914497 最近在做一个项目的UI,需求是1.拖动items后当永远有一个item保存在中间位置 ...
- NGUI系列教程十(Scroll View实现触摸滚动相册效果)
NGUI中提供了两种Scroll View 一种是通过手指或鼠标滑动视图时移动平面物体,另一种则是直接移动摄像机,他们各有各的好处.但是NGUI提供的Scroll View很难实现类似Android ...
- Scroll view 备忘
Stroyboard中使用ScrollView 当我们使用Storyboard开发项目时,如果要往控制器上拖入一个ScrollView并且添加约束设置滚动区域,是有特殊的规定的: 拖入一个scroll ...
- Unity NGUI制作scroll view
unity版本:4.5 NGUI版本:3.6.5 参考链接:http://blog.csdn.net/monzart7an/article/details/23878505,作者:CSDN 冬菊子 ...
- Scroll View 控件以Thumbnail的方式显示一个目录的全部图片,相似图片浏览器
MAC : XCode -> Scroll View 控件以Thumbnail的方式显示一个目录的全部图片,类似图片浏览器 STEP1:将两个目录复制到project里面ImageBrowser ...
- Scroll View 深入
转载自:http://mobile.51cto.com/hot-430409.htm 可能你很难相信,UIScrollView和一个标准的UIView差异并不大,scroll view确实会多一些方法 ...
- 全面理解iOS开发中的Scroll View[转]
from:http://mobile.51cto.com/hot-430409.htm 可能你很难相信,UIScrollView和一个标准的UIView差异并不大,scroll view确实会多一些方 ...
- (转)ngui3.5.7 版本Scroll View实现方法
原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://xyo123.blog.51cto.com/6369437/1405861 现在网 ...
随机推荐
- Zimbra禁止接收带有加密的文件邮件 提醒病毒(Heuristics.Encrypted.PDF)
最近碰到一个国际性大客户,一定要发送经过加密的文件,因为是合约相关的文件,对方公司有这方面要求.但是Zimbra默认是禁止接收加密的文件 - 'Block encrypted archives',这样 ...
- Unity UGUI的Slider(滑动条)件组的介绍及使用
Unity UGUI的Slider(滑动条)件组的介绍及使用 1. 什么是Slider组件? Slider(滑动条)是Unity UGUI中的一种常用UI组件用,于在用户界面中实现滑动选择的功能.通过 ...
- Stack Overflow开发者调查发布:AI将如何协助DevOps
Stack Overflow 发布了开创性的2023年度开发人员调查报告 [1].报告对 90,000 多名开发人员进行了调查,全面展示了当前软件开发人员的体验.接下来,本文将重点介绍几项重要发现,即 ...
- 美团面试拷打:ConcurrentHashMap 为何不能插入 null?HashMap 为何可以?
周末的时候,有一位小伙伴提了一些关于 ConcurrentHashMap 的问题,都是他最近面试遇到的.原提问如下: 整个提问看着非常复杂,其实归纳来说就是两个问题: ConcurrentHashMa ...
- 交叉编译 Qt5.12 armv8(aarch64) 带 WebEngine - NVIDIA JETSON TX2
编译平台 Windows10 WSL2 Debian,目标平台 NVIDIA JETSON TX2 (注:Ubuntu <= 16.04 会出现 libclang < 3.8 的问题) 下 ...
- Elasticsearch之常用术语
一. 数据库和ES简单类比 关系型数据库 表(Table) 行(Row) 列(Cloumn) Schema SQL Elasticsearch 索引(Index) 文档(Document) 字段(Fi ...
- kubernates的集群安装-kubadm
kubernates的集群安装-kubadm 环境准备工作(CentOS) 准备三台或以上的虚拟机 停用防火墙 sudo systemctl stop firewalld sudo systemctl ...
- umich cv-1
UMICH CV Image Classification---KNN 在本节课中,首先justin老师为我们介绍了图像分类了基础概念以及其用途,这里就不多涉及了 接着我们思考图像分类问题,如果我们想 ...
- [HNCTF 2022 WEEK2]e@sy_flower
花指令分析 如果没接触过花指令,先看这个博客,大致了解一下花指令 https://www.cnblogs.com/Here-is-SG/p/15802040.html 点击此处下载附件 查壳 32位, ...
- 大白话带你认识JVM(转)
转自微信公众号(JavaGuide) 前言 如果在文中用词或者理解方面出现问题,欢迎指出.此文旨在提及而不深究,但会尽量效率地把知识点都抛出来 一.JVM的基本介绍 JVM 是 Java Virtua ...