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 现在网 ...
随机推荐
- Unity UGUI的Image(图片)组件的介绍及使用
UGUI的Image(图片)组件的介绍及使用 1. 什么是UGUI的Image(图片)组件? UGUI的Image(图片)组件是Unity引擎中的一种UI组件,用于显示2D图像.它提供了一种简单而灵活 ...
- dotnet SemanticKernel 入门 自定义变量和技能
本文将告诉大家如何在 SemanticKernel 框架内定义自定义的变量和如何开发自定义的技能 本文属于 SemanticKernel 入门系列博客,更多博客内容请参阅我的 博客导航 自定义变量是一 ...
- SpringBoot获取树状结构数据-SQL处理
前言 在开发中,层级数据(树状结构)的获取往往可能是我们一大难点,我现在将自己获取的树状结构数据方法总结如下,希望能给有需要的小伙伴有所帮助! 一.测试数据准备 /* Navicat Premium ...
- 【项目源码】JavaWeb网上购书系统
JavaWeb网上购书系统 介绍 采用JSP.Servlet.MySQL.Tomcat8.0开发的网上购书系统. 软件架构 网上书城主要功能如下: (1) 前台(客户购买)部分: ① 用户管理:注册会 ...
- 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 的问题. 原因: ...
- docker入门加实战—docker数据卷
docker入门加实战-docker数据卷 容器是隔离环境,容器内程序的文件.配置等都在容器的内部,要读写容器内的文件非常不方便. 因此,容器提供程序的运行环境,但是程序运行产生的数据.程序运行依赖的 ...
- 解密Prompt系列17. LLM对齐方案再升级 WizardLM & BackTranslation & SELF-ALIGN
话接上文的指令微调的样本优化方案,上一章是通过多样性筛选和质量过滤,对样本量进行缩减,主打经济实惠.这一章是通过扩写,改写,以及回译等半监督样本挖掘方案对种子样本进行扩充,提高种子指令样本的多样性和复 ...
- 入门篇-其之六-Java运算符(中)
祝所有程序员,1024节日快乐!!! 一.自增/自减运算符 假设有一个变量intValue的值为10,如果想让这个值加1,有哪些方式? 首先,我们可以使用最原始的方式: int intValue = ...
- Net 高级调试之二:CLR和Windows加载器及应用程序域介绍
一.简介 今天是 Net 高级调试的第二篇文章,第一篇文章记录了自己学习 Net 高级调试的第一步,认识一些调试工具,有了工具的倚仗,我们开始仗剑走天涯了,开始Net 高级调试正式的征程了.我先说一下 ...
- select...for update到底是加了行锁,还是表锁?
前言 前几天,知识星球中的一个小伙伴,问了我一个问题:在MySQL中,事务A中使用select...for update where id=1锁住了,某一条数据,事务还没提交,此时,事务B中去用sel ...