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 现在网 ...
随机推荐
- DesignPattern-part1
title: "modern C++ DesignPattern-Part1" date: 2018-04-03T16:06:33+08:00 lastmod: 2018-04-0 ...
- Go语言中匿名嵌套和类型嵌套的区别
在Go语言中,匿名嵌套结构体和与类型同名的嵌套结构体不是完全等价的,它们有一些重要的区别.以下是它们之间的主要区别: 字段访问: 匿名嵌套结构体:当你使用匿名嵌套结构体时,内部结构体的字段可以被直接访 ...
- SQL函数count(),sum()理解
①准备-创建测试表: create table test ( id SMALLINT, name varchar(10) ); 插入数据: insert into test values(0,'张三' ...
- 其它——MyCat实现分库分表
文章目录 MyCat实现分库分表 一 开源数据库中间件-MyCat 二 MyCat简介 三 MyCat下载及安装 3.1 MySQL安装与启动 3.2使用docker启动多个数据库 3.3 MyCat ...
- oracle数据库性能监控常用sql
因执行时间较长建议使用plsql等第三方工具执行 --1.监控sga内存分配信息select * from v$sgainfo;--2.监控每个用户的磁盘io及io命中率select v$sess_i ...
- tmai
天猫精灵技能应用平台合作协议 发布日期:2020年03月18日 更新日期:2021年02月01日 鉴于您(语音技能.小程序或应用程序APP等的制作.提供或开发者)希望入驻或与天猫精灵技能应用平台(又称 ...
- CF1575I Illusions of the Desert
prologue 还是太菜了,这个 154 行的树剖 20min 才敲完. analysis 首先,处理这个给到我们的这个式子. \[\max(| a _ u + a _ v |, | a _ u - ...
- Makefile 入门教程
Makefile 是一个非常强大的构建自动化工具,用于管理项目的编译.链接和其他构建任务.以下是一个详细的 Makefile 使用文档,包括基本概念.语法.示例和常见任务. 1. 基本概念 目标 (T ...
- vue 基于原生动画的自动滚动表格
前言 公司展示大屏需要写滚动表格,通过滚动播放数据,自己随便摸了一个基于动画的自动滚动表格 原理 根据每行的大小和设置的每行滚动时间设置滚动位置,动态添加动画,并把数组第一项移动到最后一项,并订阅该动 ...
- 文心一言 VS 讯飞星火 VS chatgpt (118)-- 算法导论10.3 3题
三.用go语言,在ALLOCATE-OBJECT和 FREE-OBJECT过程的实现中,为什么不需要设置或重置对象的 prev 属性呢? 文心一言: 在 Go 语言中,ALLOCATE-OBJECT ...