当前位置: 首页 > news >正文

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>

相关文章:

uni-app 之 scroll-view和swiper

uni-app 之 scroll-view和swiper <!-- vue2的<template>里必须要有一个盒子&#xff0c;不能有两个&#xff0c;这里的盒子就是 view--> <template><view><navigator url"/pages/home/home"><button style"background: #ff00f…...

Harmony网络请求工具类

使用的网络请求框架是axios 1、安装axios ohpm install @ohos/axios2、封装 import axios, { FormData } from "@ohos/axios" import fs from @ohos.file.fs import ArrayList from @ohos.util.ArrayList/*** 网络请求工具类*/ class HttpManager {baseUrl:string…...

【Python 自动化】自媒体剪辑第一版·思路简述与技术方案

大家都知道我主业是个运维开发&#xff08;或者算法工程师&#xff09;&#xff0c;每天时间不多&#xff0c;但我又想做自媒体。然后呢&#xff0c;我就想了个方案&#xff0c;每天起来之后写个短视频的脚本&#xff0c;包含一系列图片和文字&#xff0c;然后上班的时候给它提…...

【前端】webpack打包去除console.log

0 问题 需要在打包的时候&#xff0c;自动地去除掉所有console.log 1 方法 // vue.config.js //... module.exports {//...config.optimization.minimizer[0].iptions.terserOptions.compress.drop_console true//... } //...也可以用if(process.env.NODE_ENV production…...

docker使用(二)提交到dockerhub springboot制作镜像

docker使用&#xff08;二&#xff09; dockerhub创建账号创建存储库成功&#xff01;开始推送获取image名 提交成功SpringBoot项目制作Dockerfile镜像部署打jar包 dockerhub创建账号 &#xff08;自认为可以理解为github一类的东西&#xff09; 单击创建存储库按钮。 设定存…...

antd中Popover 气泡卡片样式修改

最近在开发react项目的一个新需求时&#xff0c;遇到气泡卡片Popover组件样式调整的问题&#xff0c;发现不管是在标签中设置className属性&#xff0c;还是在<Popover>标签中直接设置style属性&#xff0c;都不起作用。 最后搜索查阅发现要使用overlayClassName index…...

3月面试华为被刷,准备半年,9月二战华为终于上岸,要个27K不过分吧?

终于二战上岸了&#xff0c;二战华为也并不是说非华为不可&#xff0c;只是觉得心里憋着一口气&#xff0c;这就导致我当时有其他比较好的offer&#xff0c;我也没有去&#xff0c;就是想上岸华为来证明自己,现在也算是如愿了&#xff0c;来跟大伙们分享一下~ 个人情况 我本人…...

Kali之BurpSuite_pro安装配置

文章目录 配置jdk环境安装BurpSuitePro设置快捷方式启动方式 BurpSuite2021专业版本地址&#xff1a; 下载链接&#xff1a;https://pan.baidu.com/s/1PjzcukRDoc_ZFjrNxI8UjA 提取码&#xff1a;nwm7 我的安装工具都在/home/kali/tools/ 解压后我放在burpsuite_pro目录下 把j…...

双指针算法总结

双指针 常见的双指针有两种形式&#xff1a;对撞指针&#xff0c;左右指针。 对撞指针&#xff1a; 对撞指针一般用于顺序结构中&#xff0c;也称左右指针。 • 对撞指针从两端向中间移动。以个指针从最左端开始&#xff0c;另⼀个从最右端开始&#xff0c;然后逐渐往中间逼…...

开源照片管理服务LibrePhotos

本文是为了解决网友 赵云遇到的问题&#xff0c;顺便折腾的。虽然软件跑起来了&#xff0c;但是他遇到的问题&#xff0c;超出了老苏的认知。当然最终问题还是得到了解决&#xff0c;不过与 LibrePhotos 无关&#xff1b; 什么是 LibrePhotos ? LibrePhotos 是一个自托管的开源…...

Linux指令

1 Linux 系统目录结构 /bin 存放系统指令&#xff08;可执行文件&#xff09; /boot 存放linux系统开机引导程序 /dev 存放设备文件的地方 /etc 存放系统配置文件的地方 /home 存放用户家目录的地方。 /lib和/lib64 存放系统动态链接库的地方。 /lostfound linux文件系统下特有…...

如何在Mac电脑上安装WeasyPrint:简单易懂的步骤

1. 安装homebrew 首先需要确保安装了homebrew&#xff0c;通过homebrew安装weasyprint可以将需要的库都安装好&#xff0c;比pip安装更简单快捷。 安装方法如下&#xff1a; /bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)&qu…...

手机电脑scoket通信 手机软件 APP inventor 服务端程序python

python scoket 通信 再帮助同学坐课题的时候接触到了scoket通信&#xff0c;了解到这应该是基层网络通信的原理&#xff0c;于是就导出搜索了一下相关的资料&#xff0c;简单来说scoket通信就是&#xff0c;可以让不同设备在同一个网络环境的条件下&#xff0c;可以实现相互通…...

软考高级之系统架构师之系统安全性和保密性设计

今天是2023年08月31日&#xff0c;距离软考高级只有65天&#xff0c;加油&#xff01; 备注&#xff1a;资料搜集自网络。 基础 信息必须依赖于存储、传输、处理及应用的载体&#xff08;媒介&#xff09;而存在。信息系统安全可以划分设备安全、数据安全、内容安全和行为安…...

FPGA实现电机转速PID控制

通过纯RTL实现电机转速PID控制&#xff0c;包括电机编码器值读取&#xff0c;电机速度、正反转控制&#xff0c;PID算法&#xff0c;卡尔曼滤波&#xff0c;最终实现对电机速度进行控制&#xff0c;使其能够渐近设定的编码器目标值。 一、设计思路 前面通过SOPC之NIOS Ⅱ实现电…...

C++中的volatile

volatile的本意是“易变的”&#xff0c;是一种类型修饰符&#xff0c;用它声明的类型变量表示可以被某些编译器未知的因素更改&#xff0c;比如操作系统、硬件或者其它线程等。遇到这个关键字声明的变量&#xff0c;编译器对访问该变量的代码就不再进行优化&#xff0c;从而可…...

数学建模--一维插值法的多种插值方式的Python实现

目录 1.算法流程步骤 2.算法核心代码 3.算法效果展示 1.算法流程步骤 #算法的核心就是利用scipy中的interpolate来完成工作 #一共是5种一维插值算法形式: #插值方法&#xff1a;1.阶梯插值 2.线性插值 3.2阶样条插值 4.3阶样条插值 #"nearest"阶梯插值 #"zero&…...

爱校对:让法律、医疗、教育行业的文本更加无懈可击

在今天这个信息爆炸的世界里&#xff0c;文本准确性成了法律、医疗和教育这些严谨行业中一个不能忽视的要点。一个小错误可能造成严重的后果&#xff0c;甚至影响人们的生命和事业。这正是为什么更多的专业人士开始选择使用“爱校对”来确保他们的文档、研究和通讯无懈可击。 法…...

使用pip下载第三方软件包报错超时处理方法

报错如下&#xff1a; WARNING: Retrying (Retry(total4, connectNone, readNone, redirectNone, statusNone)) after connection broken by ‘ReadTimeoutEr ror(“HTTPSConnectionPool(host‘files.pythonhosted.org’, port443): Read timed out. (read timeout15)”)’: /p…...

计算古坐标——基于GPlates Web Service的坐标点重建

Gplates客户端和在线门户&#xff0c;pygplates和gplately是存在内在联系的应用&#xff0c;它们主要实现可视化&#xff0c;输入板块模型和化石点的现今坐标信息&#xff0c;在GPlates中可视化呈现&#xff0c;点位的坐标计算并不展现。而rgplates利用R语言提供了直接进行坐标…...

Vim 调用外部命令学习笔记

Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...

生成xcframework

打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式&#xff0c;可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...

React Native 开发环境搭建(全平台详解)

React Native 开发环境搭建&#xff08;全平台详解&#xff09; 在开始使用 React Native 开发移动应用之前&#xff0c;正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南&#xff0c;涵盖 macOS 和 Windows 平台的配置步骤&#xff0c;如何在 Android 和 iOS…...

模型参数、模型存储精度、参数与显存

模型参数量衡量单位 M&#xff1a;百万&#xff08;Million&#xff09; B&#xff1a;十亿&#xff08;Billion&#xff09; 1 B 1000 M 1B 1000M 1B1000M 参数存储精度 模型参数是固定的&#xff0c;但是一个参数所表示多少字节不一定&#xff0c;需要看这个参数以什么…...

【Go】3、Go语言进阶与依赖管理

前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课&#xff0c;做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程&#xff0c;它的核心机制是 Goroutine 协程、Channel 通道&#xff0c;并基于CSP&#xff08;Communicating Sequential Processes&#xff0…...

[10-3]软件I2C读写MPU6050 江协科技学习笔记(16个知识点)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16...

学习STC51单片机31(芯片为STC89C52RCRC)OLED显示屏1

每日一言 生活的美好&#xff0c;总是藏在那些你咬牙坚持的日子里。 硬件&#xff1a;OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写&#xff0c;"1306" 是产品编号。 驱动 OLED 屏幕的 IIC 总线数据传输格式 示意图 …...

MySQL中【正则表达式】用法

MySQL 中正则表达式通过 REGEXP 或 RLIKE 操作符实现&#xff08;两者等价&#xff09;&#xff0c;用于在 WHERE 子句中进行复杂的字符串模式匹配。以下是核心用法和示例&#xff1a; 一、基础语法 SELECT column_name FROM table_name WHERE column_name REGEXP pattern; …...

基于SpringBoot在线拍卖系统的设计和实现

摘 要 随着社会的发展&#xff0c;社会的各行各业都在利用信息化时代的优势。计算机的优势和普及使得各种信息系统的开发成为必需。 在线拍卖系统&#xff0c;主要的模块包括管理员&#xff1b;首页、个人中心、用户管理、商品类型管理、拍卖商品管理、历史竞拍管理、竞拍订单…...

三分算法与DeepSeek辅助证明是单峰函数

前置 单峰函数有唯一的最大值&#xff0c;最大值左侧的数值严格单调递增&#xff0c;最大值右侧的数值严格单调递减。 单谷函数有唯一的最小值&#xff0c;最小值左侧的数值严格单调递减&#xff0c;最小值右侧的数值严格单调递增。 三分的本质 三分和二分一样都是通过不断缩…...