uni-app 之 scroll-view和swiper

uni-app 之 scroll-view和swiper

<!-- vue2的<template>里必须要有一个盒子,不能有两个,这里的盒子就是 view-->
<template><view><navigator url="/pages/home/home"><button style="background: #ff00ff; color: aqua;">跳转到新页面</button></navigator><view>Vertical Scroll<text>\n纵向滚动</text></view><view @tap="goTop">点击这里返回顶部</view><view><scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-y" @scrolltoupper="upper"@scrolltolower="lower" @scroll="scroll"><view id="demo1" style="background: #fff000;" class="scroll-item-y 1">A</view><view id="demo2" style="background: #00ff00;" class="scroll-item-y 2">B</view><view id="demo3" style="background: #aa00aa;" class="scroll-item-y 3">C</view></scroll-view></view><view>Horizontal Scroll<text>\n横向滚动</text></view><view><scroll-view class="scroll-h" scroll-x="true"><view id="demo1" style="background: #fff000;" class="scroll-item-h 1">A</view><view id="demo2" style="background: #00ff00;" class="scroll-item-h 2">B</view><view id="demo3" style="background: #aa00aa;" class="scroll-item-h 3">C</view></scroll-view></view></view>
</template>

<script>export default {data() {return {scrollTop: 0,old: {scrollTop: 0}}},methods: {upper: function(e) {console.log(e)},lower: function(e) {console.log(e)},scroll: function(e) {console.log(e)this.old.scrollTop = e.detail.scrollTop},goTop: function(e) {// 解决view层不同步的问题this.scrollTop = this.old.scrollTopthis.$nextTick(function() {this.scrollTop = 0});uni.showToast({icon: "none",title: "纵向滚动 scrollTop 值已被修改为 0"})}}}
</script>

<style lang="scss">.scroll-y {height: 300rpx;.scroll-item-y {height: 200rpx;line-height: 200rpx;text-align: center; // 元素居中font-size: 36rpx;}}.scroll-h {white-space: nowrap;width: 100%;height: 300rpx;.scroll-item-h {display: inline-block;width: 80%;height: 100%;line-height: 300rpx;text-align: center; // 元素居中font-size: 36rpx;}}
</style>


swiper 轮播图

//indicator-dots="ture"小圆点,
//autoplay="ture"自动轮播,
//interval="1000"跳转时间,
//circular="ture"是否采用衔接滑动,即播放到末尾后重新回到开头

        <swiper style="width: 100%; height: 500rpx;" indicator-dots="ture" autoplay="ture" interval="1000"circular="ture"><swiper-item><view class="swiper-item 1">A西湖龙井</view><imagesrc="https://img2.baidu.com/it/u=2377761094,931944803&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"></image></swiper-item><swiper-item><view class="swiper-item 2" style="text-align: center;">B洞庭碧螺春</view><imagesrc="https://img0.baidu.com/it/u=1273610305,982475941&fm=253&fmt=auto&app=120&f=JPEG?w=501&h=500"></image></swiper-item><swiper-item><view class="swiper-item 3" style="text-align: right;">C信阳毛尖</view><image src="https://img2.baidu.com/it/u=769633489,863861704&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"></image></swiper-item></swiper>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/68394.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Selenium2+python】自动化unittest生成测试报告

前言 批量执行完用例后&#xff0c;生成的测试报告是文本形式的&#xff0c;不够直观&#xff0c;为了更好的展示测试报告&#xff0c;最好是生成HTML格式的。 unittest里面是不能生成html格式报告的&#xff0c;需要导入一个第三方的模块&#xff1a;HTMLTestRunner 一、导…

leetcode1288. 删除被覆盖区间(java)

删除被覆盖区间 题目描述贪心法代码演示 题目描述 难度 - 中等 leetcode1288. 删除被覆盖区间 给你一个区间列表&#xff0c;请你删除列表中被其他区间所覆盖的区间。 只有当 c < a 且 b < d 时&#xff0c;我们才认为区间 [a,b) 被区间 [c,d) 覆盖。 在完成所有删除操作…

MySql学习笔记05——DML

DML 插入数据insert insert into 表名(字段名1&#xff0c;字段名2&#xff0c;字段名3...)values(值1&#xff0c;值2&#xff0c;值3)&#xff1b;字段名和值要一一对应&#xff08;顺序对应&#xff0c;数据类型对应&#xff09; insert into t_student(no,name,sex,age,…

Docker使用数据卷挂载进行数据存储与共享

一、挂载和数据卷 在 Docker 中&#xff0c;挂载&#xff08;Mounting&#xff09;和数据卷&#xff08;Data Volumes&#xff09;是用于在容器和宿主机之间共享数据的机制。 挂载&#xff1a;将宿主机文件系统中的目录或文件与容器中的目录或文件进行关联的过程。数据卷&…

收入下降,亏损扩大,利润率急剧恶化,蔚来仍充满风险

来源&#xff1a;猛兽财经 作者&#xff1a;猛兽财经 蔚来第二季度财报分析 猛兽财经从蔚来&#xff08;NIO&#xff09;2023年第二季度财报中&#xff0c;获得的最大收获并不是该公司的收入下降或亏损扩大&#xff0c;而是由于价格竞争加剧&#xff0c;中国电动汽车行业整体上…

什么是安全运营中心(SOC),应该了解什么

安全运营中心&#xff08;SOC&#xff09; 是一种企业监视和警报设施&#xff0c;可帮助组织检测安全威胁、监视安全事件和分析性能数据以改进公司运营。 什么是安全运营中心&#xff08;SOC&#xff09; 安全运营中心&#xff08;SOC&#xff09;是一个中央监视和监视中心&a…

第二次作业

1.编写脚本for1.sh,使用for循环创建20账户&#xff0c;账户名前缀由用户从键盘输入&#xff0c;账户初始密码由用户输入&#xff0c;例如: test1、test2、test3、.....、 test10 编写脚本for1.sh 执行脚本&#xff1a;bash for.sh 2&#xff0c;编写脚本for2.sh,使用for循环,通…

springboot 集成 lucene

简介 数据每分钟产生200条&#xff0c;使用mysql储存。目前有数据超过700M。按照日期查询&#xff0c;按月查询包含每次超过20w条以上&#xff0c;时间比较长。计划使用lucene优化查询&#xff0c;不适用es是因为项目较小&#xff0c;没有更富裕的资源。 基本步骤 引入依赖。…

工业级大模型应用长啥样

我们可以通过开源工具&#xff0c;搭建大模型应用的“原型系统”&#xff0c;但是我要来“泼冷水”&#xff0c;因为这距离工业级大模型应用&#xff0c;还是有很大的差距。 这篇文章主要讨论这种”原型系统“可能带来的认知误区以及工业级大模型应用需要考量的因素。 “原型…

模糊测试面面观 | 模糊测试是如何发现异常情况的?

协议模糊测试是一种用于评估通信协议、文件格式和API实现系统安全性和稳定性的关键技术。在模糊测试过程中&#xff0c;监视器扮演着关键角色&#xff0c;它们能够捕获异常情况、错误响应、资源利用等&#xff0c;为测试人员提供有价值的信息&#xff0c;有助于发现潜在漏洞和问…

ceph Monitor原理和代码流程介绍

Monitor介绍 Monitor在Ceph集群中扮演管理者的角色&#xff0c;维护了整个集群的状态&#xff0c;集群的状态被抽象成几个Map对象&#xff0c;包括monmap、osdmap、mdsmap、authmap、logmap等&#xff0c;保证集群的相关组件在同一时刻能够达成一致&#xff0c;相当于领导层。…

删除maven中出现.lastUpdate结尾的文件

出现 .lastupdate 结尾的文件的原因:由于网络原因没有将maven的依赖下载完整. 解决方案: 1) 删除所有以 .lastupdate 结尾的文件 A) 1.切换到maven本地仓库 B)2.在当前目录打开cmd命令行(shift右键-->在此处打开命令窗口 或 直接在当前文件路径上敲cmd 或 右键-->…

el-dialog设置高度、使用resetFields清除表单项无效问题

初学者容易踩坑的的el-dialog、el-form问题 1. el-dialog设置高度2. el-form中表单项对不齐3. 使用resetFields清除表单项无效 1. el-dialog设置高度 在el-dialog中里面添加一个div设置固定高度&#xff0c;或者限制最小的高度。 <el-dialogtitle"选择图标"v-mod…

thinkphp:数据库查询,嵌套别的表的查询(别的表做子查询)

例子 从 vendors 表中选择记录。在 vendors 表中&#xff0c;筛选出具有满足以下条件的 vendor_code 值&#xff1a; 对应的采购订单&#xff08;在 po_headers_all 表中&#xff09;存在未完全接收的采购行&#xff08;在 po_lines_all 表中&#xff09;。相应的采购订单状态…

附录1-爬虫的一些技巧

目录 1 寻找url与显示内容的关系 2 修改请求头 3 局部刷新 4 阅读返回信息 5 多尝试页面其他的使用方式 6 尝试不同类型参数 7 表单类型的post多用data发&#xff0c;接口类型的post多用json发 8 消除degger 9 你在浏览器上看到的html与你下载下来的html不一…

嵌入式学习笔记(12)汇编写启动代码之设置栈和调用C语言

C语言运行时需求和栈的意义 “C语言运行时&#xff08;runtime&#xff09;”需要一定的条件&#xff0c;这些条件由汇编来提供。C语言运行时主要是需要栈。 C语言和栈的关系&#xff1a;C语言中的局部变量都是用栈来实现的。如果我们汇编部分没有给C部分预先设置合理合法的栈…

代码随想录训练营 dp

代码随想录训练营 dp 416. &#x1f338;分割等和子集&#x1f338;code 416. &#x1f338;分割等和子集&#x1f338; 给你一个 只包含正整数 的 非空 数组 nums 。请你判断是否可以将这个数组分割成两个子集&#xff0c;使得两个子集的元素和相等。 code //看起来风轻云淡的…

【STM32】学习笔记-时间戳RTC

Unix时间戳 Unix 时间戳&#xff08;Unix Timestamp&#xff09;定义为从UTC/GMT的1970年1月1日0时0分0秒开始所经过的秒数&#xff0c;不考虑闰秒 时间戳存储在一个秒计数器中&#xff0c;秒计数器为32位/64位的整型变量 世界上所有时区的秒计数器相同&#xff0c;不同时区通…

命令执行漏洞复现攻击:识别威胁并加强安全

环境准备 这篇文章旨在用于网络安全学习&#xff0c;请勿进行任何非法行为&#xff0c;否则后果自负。 一、攻击相关介绍 原理 主要是输入验证不严格、代码逻辑错误、应用程序或系统中缺少安全机制等。攻击者可以通过构造特定的输入向应用程序或系统注入恶意代码&#xff…

Linux下 /sys/class 一些操作

Linux下&#xff0c;/dev、/sys/class的区别 /dev下面有很多节点&#xff0c;每一个节点代表一个设备&#xff0c;/dev目录下面是按物理器件进行分类&#xff1b;而/sys/class下面的更多是按功能抽象出来的。 参考1 demo 在正点原子的基础上进行演示 #include <linux/ty…