- 综合排序
- 最热优先
- 最新优先
- 来自专栏前端随笔
逐步拆解React组件—Swipe轮播图
以前有写过一篇简版的swipe轮播组件，当时并没有考虑很多细节和通用参数配置，主要还是在于记录实现思路，也就没有源码，赶在年前重新拾起来好好的整理了一番，并封装成了组件，除react本身外无任何第三方依赖 第一步，布局页面 这里通过把组件拆分为Swipe和SwipeItem两个组件，Swipe为主要容器，SwipeItem为子项，Swipe验证children是否为SwipeItem组件，布局上采用了flex // Swipe.tsx import React from 'react'; import SwipeItem from './SwipeItem'; import '. /style.less'; const Swipe:React.FC<SwipeProps> = (props) => { const { initialSwipe = 0, "> <div style={wrappStyle} className={`lumu-swipe__container ${vertical ?
3.8K10编辑于 2022-10-05 - 来自专栏从零开始学自动化测试
Airtest IDE 自动化测试9 - swipe 滑动屏幕
前言 swipe 的作用是在屏幕上从一个点滑动到另外一个点的位置 swipe 使用介绍 swipe 方法作用：从v1 经历 steps 步滑动到 v2，且期间总持续 duration 秒，相当于每步是 如果没有 v2 值则滑动的方向依赖于 vector 的滑动比例值为终点 swipe(v1, v2=None, vector=None, duration=0.01)： v1： 截图对象-图片 或者坐标( 先点下 Airtest 辅助窗的 swipe 按钮，截图需移动的图片位置，鼠标往左移动到目标区域释放，自动生成如下代码 ? 选中代码执行，会看到滑动效果 ?
5.1K10发布于 2021-06-24 - 来自专栏清菡软件测试
Appium常用操作之「元素定位、swipe 滑屏操作」
三、打开 app 并登录 四、移动端特有的操作 1.swipe 滑屏操作 2.如果写一个操作，所有的手机都能适用，是不是应该考虑屏幕的尺寸呢？ 3.有没有什么办法可以获取整个设备的尺寸大小？ 滑屏操作 Appium 的swipe函数是针对屏幕上的坐标来滑动的。 swipe函数是安卓和 IOS 两种设备同时通用。 [20201027143333.png] 从一个点滑到另外一个点，那么每个点都有 x 值和 y 值。swipe有 4 个参数。 swipe有 2 个坐标点，首先要得到start\_x。 x 轴是width。size['width']是 x 轴的最大值。 **所有人的使用习惯：** 滑屏都是在正中间滑屏或者稍微偏下一点。 (start\_x,start\_y,end\_x,end\_y,200) #从左向右滑 driver.swipe(end\_x,end\_y,start\_x,start\_y,200) #
2.4K81发布于 2020-10-30 - 来自专栏清菡软件测试
Appium常用操作之「元素定位、swipe 滑屏操作」
三、打开 app 并登录 四、移动端特有的操作 1.swipe 滑屏操作 2.如果写一个操作，所有的手机都能适用，是不是应该考虑屏幕的尺寸呢？ 3.有没有什么办法可以获取整个设备的尺寸大小？ 滑屏操作 Appium 的swipe函数是针对屏幕上的坐标来滑动的。 swipe函数是安卓和 IOS 两种设备同时通用。 ? 从一个点滑到另外一个点，那么每个点都有 x 值和 y 值。swipe有 4 个参数。所以起始 x，起始 y，结束 x，结束 y。 swipe有 2 个坐标点，首先要得到start_x。 x 轴是width。size['width']是 x 轴的最大值。 「所有人的使用习惯：」 滑屏都是在正中间滑屏或者稍微偏下一点。 ：x轴不变，y从小到大 driver.swipe(size["width"]*0.5,size["heigth"]*0.1,size["width"]*0.5,size["heigth"]*0.9)
3.4K10发布于 2020-12-02 - 来自专栏从零开始学自动化测试
appium+python自动化24-滑动方法封装（swipe）
一、swipe介绍 1.查看源码语法，起点和终点四个坐标参数，duration是滑动屏幕持续的时间，时间越短速度越快。默认为None可不填，一般设置500-1000毫秒比较合适。 ``` swipe(self, start_x, start_y, end_x, end_y, duration=None) Swipe from one point to another point 开始滑动的y坐标 - end_x - 结束点x坐标 - end_y - 结束点y坐标 - duration - 持续时间，单位毫秒 :Usage: driver.swipe * 0.75 y1 = l['height'] * 0.5 x2 = l['width'] * 0.05 for i in range(n): driver.swipe * 0.05 y1 = l['height'] * 0.5 x2 = l['width'] * 0.75 for i in range(n): driver.swipe
2.3K40发布于 2018-04-08 - 来自专栏iOS开发～
iOS_按钮 cancel 手势 跟 swipe上滑手势 冲突
按钮cancel手势 跟 swipe上滑手势 冲突 问题 最近做需求遇到一个问题，设计想在播放器底部播控栏添加上滑手势，换起换台面板。 let touchPoint = self.touchPoint { if (touchPoint.y > point.y) { print("swipe view.isUserInteractionEnabled = true view.didReceiveSwipeUp = { print("did reveive swipe btn.addGestureRecognizer(tap) btn.backgroundColor = .red btn.didReceiveSwipeUp = { print("did reveive swipe
56120编辑于 2023-10-18 - 来自专栏前端儿
移动端前端常见的触摸相关事件touch、tap、swipe等整理
前端的很多事件在PC端和浏览器端可公用，但有些事件却只在移动端产生，如触摸相关的事件 本文整理了移动端常见的一些事件，包括原生支持的click、touch、tap、swipe事件，也有定义型的gesture singleTap doubleTap四种之分 tap: 手指碰一下屏幕会触发 longTap: 手指长按屏幕会触发 singleTap: 手指碰一下屏幕会触发 doubleTap: 手指双击屏幕会触发 4. swipe 类事件 滑动事件，有swipe swipeLeft swipeRight swipeUp swipeDown 五种之分 swipe：手指在屏幕上滑动时会触发 swipeLeft：手指在屏幕上向左滑动时会触发 }); 12 }); 13 } 14 15 addEvent(one, 'tap click touchstart touchmove touchend touchcancel swipe 简单地修改，将事件监听中第三个参数置为true，输出完整的事件对象 addEvent(one, 'tap click touchstart touchmove touchend touchcancel swipe
3.1K20发布于 2018-09-03 - 来自专栏黄啊码【CSDN同名】
微信小程序swipe切换及自适应高度问题解决
页面代码，其中的变量这些东西需要的自己替换一下即可： <view> <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}"
1.1K41发布于 2021-07-23 - 来自专栏自动化、性能测试
Appium问题解决方案（10）- Original error: Swipe did not complete successfully
背景 从搜索页面返回首页之后，执行 swipe 滑动操作，但是报错了，如上图 解决方法 只需要在第一次 swipe 之前加个 sleep，强制等待即可 备注 这种解决方案其实不好，强制等待能少用就少用
62610发布于 2020-06-09 - 来自专栏黄啊码【CSDN同名】
【黄啊码】微信小程序swipe切换及自适应高度问题解决
我用的是医疗小程序挂号的例子，示例如图所示 页面代码，其中的变量这些东西需要的自己替换一下即可： <view> <view class="swiper-tab-list {{current
43210发布于 2021-09-26 - 来自专栏wOw的Android小站
[Android][Framework]系统手势和状态栏
= detectSwipe(event); mSwipeFireable = swipe == SWIPE_NONE; if (swipe = detectSwipe(event); mSwipeFireable = swipe == SWIPE_NONE; if (swipe == SWIPE_FROM_TOP swipe = detectSwipe(i, move.getEventTime(), move.getX(p), move.getY(p)); if (swipe ! = SWIPE_NONE) { return swipe; } } } return SWIPE_NONE; } ) { return SWIPE_FROM_LEFT; } return SWIPE_NONE; }
3K10发布于 2018-09-18 - 来自专栏APP开发教程
实例|APICloud AVM框架封装滑动单元格组件
组件文件easy-swipe-cell.stml<template><view class="easy-<em>swipe</em>-cell_container" data-id={itemId} @touchstart " id="btn"><view class="easy-<em>swipe</em>-cell_btn-item" style="background-color: #ee0a24;" data-id={itemId} data-type='delete' @click="clickItem"><text class="easy-<em>swipe</em>-cell_btn-item-label">删除</text></view>< view class="easy-<em>swipe</em>-cell_btn-item" style="background-color: #07c160;" data-id={itemId} data-type=' /components/easy-<em>swipe</em>-cell.stml'export default {name: 'demo-easy-swipe-cell',apiready(){//like created
59420编辑于 2022-07-19 - 来自专栏跟牛老师一起学WEBGIS
Openlayers2卷帘功能的实现
实现代码： 在此，扩展了一个名为Swipe的Control，Swipe的代码如下： /* * * @requires OpenLayers/Control.js */ /* The following */ /* global OpenLayers, escape */ /** api: (define) * module = OpenLayers.Control * class = Swipe = new OpenLayers.Control.Swipe({map: map}); * map.addControls([swipe]); * Swipe.activate() * * :return: ``OpenLayers.Control.Swipe`` * * Add a swipe control in the map */ OpenLayers.Control.Swipe In this case the swipe control is updated accordingly.
1.7K20发布于 2018-10-23 - </template><script -- swipe轮播图 --> <Swipe></Swipe>
【Vue H5项目实战】从0到1的自助点餐系统—— 项目页面布局(Vue3.2 + Vite + TS + Vant + Pinia + Nodejs + Mo
"> <van-swipe-item>1</van-swipe-item> <van-swipe-item>2</van-swipe-item> <van-swipe-item >3</van-swipe-item> <van-swipe-item>4</van-swipe-item> </van-swipe>
<! 将要展示的静态图像copy到src/asserts文件夹中然后修改Swipe.vue，读取图像：<template> <van-swipe class="my-swipe" }} </van-swipe-item> </van-swipe> </van-notice-bar> <!68110编辑于 2024-12-03 - 来自专栏c++ 学习分享
ec函数,转的
[1], touch1 = [{"action": 0, "x": swipe[0][0], "y": swipe[0][1], "pointer": 1, "delay": time} ], touch2 = [{"action": 0, "x": swipe1[0][0], "y": swipe1[0][1], "pointer": 2, "delay": time} ] for (let i = 1; i < swipe.length - 1; i++) { touch1.push({"action": 2, "x": swipe[i][ 0], "y": swipe[i][1], "pointer": 1, "delay": time}); touch2.push({"action": 2, "x": swipe1[i] "x": swipe[swipe.length - 1][0], "y": swipe[swipe.length - 1][1], "pointer": 1,
47040编辑于 2023-07-08 - 来自专栏OECOM
js实现底部带圆点的左右滑动效果
viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0"> </head> <style> .swipe { overflow: hidden; visibility: hidden; position: relative; } .swipe-wrap { overflow: hidden; position: relative; } .swipe-wrap > figure { float: left; ">
"></script> <script> var slider = Swipe(document.getElementById('slider'), { auto: 300010.2K20发布于 2020-07-01来自专栏Cordova封装H5 APPvue实现广播公告通知
vertical class="notice-swipe" :autoplay="3000" :show-indicators="false" > <van-swipe-item>牛羊网平台更多功能板块陆续上架中...敬请期待！ </van-swipe-item> <van-swipe-item>牛羊网养殖户入驻模式已开通,欢迎您的申请！ </van-swipe-item> <van-swipe-item>牛羊网为唯一官方平台请认准下载以防上当受骗！ </van-swipe-item> </van-swipe> </van-notice-bar>
1.1K10编辑于 2022-03-08<div = document.getElementById('swipe') const MAX = 1000 swipe.setAttribute('min', 0) swipe.setAttribute ('max', MAX) swipe.setAttribute('value', MAX / 2) swipe.oninput = function(e) { setStyle来自专栏跟牛老师一起学WEBGISmapboxGL卷帘实现
top: 0; font-size: 32px; color: white; padding: 100px 0; } .swipe .swipe-bar { position: fixed; width: 4px; height: 100%; content: ' ' "> <input type="range" id="<em>swipe</em>"/>
2.1K10发布于 2021-09-10来自专栏前端领域【CSS3】使用纯CSS做一个简易轮播图（小解送书第二期）
/lunbo.css"> </head> <body>
<! ul{ padding: 0; width: calc(800px * 3); transition: 0.5s; } .swipe li{ float: left; ; } .swipe li:nth-child(3){ background-color: lightsalmon; } /* for属性值以“indicator”开头的所有label元素（指示器 ） */ .swipe label[for^="indicator"]{ /* 绝对定位 */ position: absolute; top: 450px; width "]{ left: 49%; } /* for属性值为“indicator3”的label元素 */ .swipe label[for="indicator3"]{ left: 54%;64120编辑于 2023-10-17来自专栏天天网页image资源如何判断加载完毕
定时器 var isLoaded = true; // 控制变量 // 判断图片加载状况，加载完成后回调 isImgLoad(function(){ $('.swipe ul').height($('.swipe img').css('height')); }); $(window).resize(function(){ $('.swipe ul').height($('.swipe img').css('height')); }); // 封装函数 function isImgLoad(callback){ ul').height($('.swipe img').css('height')); }) 3.2多张 promise对象的all()方法 const imgarr = [ 'http: ul').height($('.swipe img').css('height')); })
1.9K10发布于 2018-09-29
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号