Web App 开发-----滑动显示功能按钮，点击按钮触发事件

最新推荐文章于 2024-01-20 17:28:29 发布
最新推荐文章于 2024-01-20 17:28:29 发布
阅读量421 收藏
点赞数
文章标签： web app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_58760840/article/details/123960256
版权 

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
	</head>
	<body>
		<div class="mui-content">
			<h4>滑动显示功能按钮，点击按钮触发事件</h4>
			<ul id="task_1" class="mui-table-view">
				<li class="mui-table-view-cell">
					<div class="mui-slider-handle">
						左滑显示删除按钮
					</div>
					<div class="mui-slider-right">
						<a class="mui-btn mui-btn-red">删除</a>
					</div>
				</li>
				<li class="mui-table-view-cell">
					<div class="mui-slider-handle">
						右滑显示删除按钮
					</div>
					<div class="mui-slider-left">
						<a class="mui-btn mui-btn-red">删除</a>
					</div>
				</li>
				<li class="mui-table-view-cell">
					<div class="mui-slider-left">
						<a class="mui-btn mui-btn-red">删除</a>
					</div>
					<div class="mui-slider-right">
						<a class="mui-btn mui-btn-red">删除</a>
					</div>
					<div class="mui-slider-handle">
						左右滑动均可显示删除按钮
					</div>
				</li>
			</ul>
			
	</body>
	<script src="js/mui.js"></script>
	<script type="text/javascript">
		mui.init()
			(function($) {
				var btnArray = ["确认", "取消"];
				//点击按钮触发事件
				$("#task_1").on("tap", ".mui-btn", function(event) {
					var elem = this;
					var li = elem.parentNode.parentNode;
					mui.confirm("确认删除该条记录?", "Hello MUI", btnArray, function(e) {
						if (e.index == 0) {
							li.parentNode.removeChild(li);
						} else {
							setTimeout(function() {
								$.swipeoutClose(li);
							}, 10);
						}
					});
				});
	</script>

</html>

代码效果：

 

 

烊烊！
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
uni-app实现滑动切换效果
weixin_59702843的博客
06-18 8072
uni-app框架了解实现一个滚动切换tab效果，这个很常见的一个效果，最后封装成一个组件，便于之后使用，写这个须要引入uni官方提供的uni.css样式，用到了写好的样式，就不须要本身写了css
web按钮绑定点击事件
ltchu的博客
07-06 9129
1.静态绑定 （1）onclick方法 jsp代码<button href="javascript:;" class="weui_btn weui_btn_mini weui_btn_default" style="background:#c90048; color:#fff" onClick = "audit('{{info.id}}')">审核</button>js事件处理function
vue-router 手势滑动触发返回功能
01-21
vue-router的路由变换只存在“变换前”和“变换后”，不存在“切换中”的状态，所以做不到大多数app（微信那样的）在滑动过程中让界面跟随手指移动。但滑动事件还是可以监听的，我们可以在滑动之后再触发路由回退事件。 　　微博的滑动返回基本上就是这样的原理：先滑动、再触发返回事件，但用起来很是怪异，有严重的滞后感。夸克浏览器做的就比较好：一是滑动时界面虽然不动，但是界面上有小图标提示，能让用户接受到反馈；二是返回过程很快，没有多余的过渡动画。 　　app.vue文件如下： <template> <div id=app v-on:touchstart=bodyTouchStart v
uni-app列表项实现左划操作功能
02-25
uni-app列表项实现左划操作功能。 开箱即用。
15种漂亮的纯CSS3滑动按钮特效
06-29
15种漂亮的纯CSS3滑动按钮特效
WEB--js点击事件写法
qq_25672165的博客
01-22 1603
click()和onclick() click 是方法，执行click就是模拟鼠标点击，同时会触发onclick事件 onclick是事件，给element赋予一种行为 click点击事件写法 方式一 # demo.html <input type="button" id="login" value="登录"> # demo.js $(document).ready(function(){ $('#login').click(function(){ va
Web(五、六)
m0_74778189的博客
01-12 1560
DOM和BOM
Web前端 | JavaScript（事件）
m0_61933976的博客
10-17 2860
Web前端 | JavaScript（事件）
Web基础 ( 九 ) 事件
yuanchun的知识整理
05-30 1823
事件是指在 Web 页面中发生的操作或状态，比如用户点击、悬停、滚动、输入等。通过事件，我们可以对用户的操作作出相应的反应，比如更新页面内容、改变元素样式、提交表单数据等。就是用来识别用户操作并触发处理函数.
【JavaWeb】第三章 JavaScript事件
llg___的博客
11-07 1077
事件是电脑输入设备与页面进行交互的响应。onload加载完成事件页面加载完成之后，常用于做页面JS代码初始化操作onclick单击事件常用于按钮的点击响应onblur失去焦点事件常用于输入框失去焦点后验证其输入内容是否合法onchange内容发生改变事件常用于下拉列表和输入框内容发生改变后操作onsubmit表单提交事件常用于表单提交前，验证所有表单项是否合法。
滑动按钮—C#语言开发安卓App,实现滑动按钮效果的代码
04-18
最近在公司实习，导师交了一个任务，做出一个滑动按钮，查找资料想办法，解决了任务。现在把代码贡献出来，小菜鸟，各位见谅。
jQuery实现按钮滑动切换
11-03
可用于web前端开发时图片滑动切换特效、web后端开发功能开启与关闭。
JavaScript滑块开关按钮
10-22
用HTML、CSS和原生JavaScript设计的滑块开关按钮，点击切换状态。用HTML、CSS和原生JavaScript设计的滑块开关按钮，点击切换状态。
web-app-template:与框架无关的Web应用程序模板
05-25
git grep -l web-app-template | xargs sed -i ' ' -e ' s/web-app-template/my-app/g ' git grep -l ' Web App Template ' | xargs sed -i ' ' -e ' s/Web App Template/My App Template/g ' git grep -l ' Web App...
uni-app uni-data-picker 省市区数据表
06-16
<uni-data-picker> 是一个选择类datacom组件。支持多列级联选择。列数没有限制，如果屏幕显示不全，顶部tab区域会左右滚动。 适用于uni-app使用uni-data-picker实现省市区选择器的json数据
uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能
10-16
主要介绍了uni-app自定义导航栏按钮|uniapp仿微信顶部导航条,需要的朋友可以参考下
uniapp（或vue）封装一个可移动按钮
weixin_44632219的博客
01-20 976
button class="addBtn" size="mini" @click="addBtn" >新建排盘</button>console.log('执行handleTouchStart1')//右箭头显示并且x维持在0～50之内。不仅可以移动，当移动出屏幕会出现左右两侧拉回按钮（可参考dy悬浮窗口效果）console.log('隐藏')// 限制收纳jt在屏幕边缘，否则隐藏。当距离超出右侧可视屏幕一定距离，显示左侧拉回按钮（右侧同理）// 记录初始点击位置。/* 将容器设置为相对定位 */
uni 实现向左滑动出现删除
_NIXIAKF的博客
07-22 979
效果图： templete： <template> <view class="content-1"> <view class="container-1" @touchstart="touchS" @touchmove="touchM" @touchend="touchE" :style="{'left':act_touch==index?leftStyle + 'upx':0}" :data-index="index" v-...
uni-app中nvue如何制作侧滑菜单, 安卓机解决方案, 低端机型解决方案
qq_54690422的博客
10-24 2067
最近萌新制作的一个项目需要制作移动端应用, 为了减少开发成本首先想到了跨平台开发方式uni-app uni-app一共有两种渲染方式: 一种是写 .vue 最后以 web-view 渲染出页面, 这种模式因是基于浏览器所以很容易做到在ios和Android页面保持一致, 但是这种模式有一个致命的缺点: 性能问题 第二种是写 .nvue文件, 采用 week 技术渲染成原生组件, 这种模式性能没得话说, 但是因为局限于 week 本身的原因, 在有些方法很难做到ios和Android页面保持
uni-app点击按钮显示输入框
最新发布
05-29
以下是uni-app中点击按钮显示输入框的例子： 1. 在button组件上绑定点击事件，在事件处理函数中设置flag变量为true ```html <template> <view> <button @tap="showInput">点击输入</button> <input v-show="flag" type="text" placeholder="请输入内容"></input> </view> </template> <script> export default { data() { return { flag: false } }, methods: { showInput() { this.flag = true; } } } </script> ``` 2.在button组件上绑定点击事件，使用uni.showModal方法来弹出带有输入框的模态框 ```html <template> <view> <button @tap="showInput">点击输入</button> </view> </template> <script> export default { methods: { showInput() { uni.showModal({ title: '请输入内容', content: '', confirmText: '确认', cancelText: '取消', showCancel: true, success(res) { if (res.confirm) { console.log('输入的内容为：', res.content) } else if (res.cancel) { console.log('用户点击取消') } } }) } } } </script> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

烊烊！

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值