uniapp小程序 用@touchmove.stop.prevent=““阻止滑动穿透 但是会影响弹出层内容滑动

这篇具有很好参考价值的文章主要介绍了uniapp小程序 用@touchmove.stop.prevent=““阻止滑动穿透 但是会影响弹出层内容滑动。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

<!-- 弹出框 -->
<view class="popCss" :style="{'top':curTop+'px'}" @touchmove.stop.prevent="" v-if="isPop" @tap="curTab = null">
    <!-- 全部分类 -->
    <view class="typeOne typeOneText" v-if="curTab==0" @tap.stop="">
        <!-- 左侧大分类 -->
        <view class="oneLeft">
            <scroll-view class="scroll-view" scroll-y>
            <view class="itemLeft" v-for="(item,index) in typeOne" :key="index" :class="index==oneIndex?'hover':''" @tap="changeOne(index)">{{item.name}}</view>
            </scroll-view>
        </view>
        <!-- 右侧子分类 -->
        <view class="oneRight">
            <scroll-view class="scroll-view" scroll-y>
                <view class="itemRight" v-for="(itemC,indexC) in typeOne[oneIndex].children" :key="indexC"  :class="oneIdC==itemC.id?'hover':''" @tap="chengeOneC(itemC,typeOne[oneIndex])">{{itemC.name}}</view>
            </scroll-view>
        </view>
    </view>
</view>

uniapp小程序 用@touchmove.stop.prevent=““阻止滑动穿透 但是会影响弹出层内容滑动

之前加 scroll-view 也不好使 向上滑动也不动 后来加了css 

.scroll-view{max-height: 608rpx; overflow-y: scroll;} ******必加******文章来源地址https://www.toymoban.com/news/detail-510910.html

	.popCss{
		position: fixed;
		right: 0;
		left:0;
		width: 100%;
		height: 100vh;
		background: rgba(0, 0, 0, 0.4);
		bottom: var(--window-bottom);
		z-index: 111;
		// 全部分类		
		.typeOne{
			max-height: 608rpx;
			background: $whiteColor;
			overflow: hidden;
			.scroll-view{
				max-height: 608rpx; 
				overflow-y: scroll;
			}
			.oneLeft{
				width: 300rpx;
				// max-height: 608rpx;
				background: #F7F7F7;
				// overflow-y: scroll;
				float: left;
				display: block;
				.itemLeft{
					padding: 0 60rpx;
					@extend .oneHidden;
					height: 76rpx;
					line-height: 76rpx;
					@include defaultFont(26rpx,normal,#2E2E2E);
				}
				.hover{
					background: $whiteColor;
					color: #E9513D;
				}
			}
			.oneRight{
				float: right;
				display: block;
				width: 410rpx;
				.itemRight{
					padding: 0 60rpx 0 0;
					@extend .oneHidden;
					height: 76rpx;
					line-height: 76rpx;
					@include defaultFont(26rpx,normal,#2E2E2E);
				}
				.hover{
					color:#E9513D;
				}
			}
		}
}

到了这里,关于uniapp小程序 用@touchmove.stop.prevent=““阻止滑动穿透 但是会影响弹出层内容滑动的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包赞助服务器费用

相关文章

  • 小程序阻止手机自带的滑动返回退出事件(uni-app,微信小程序,page-container)

    小程序阻止手机自带的滑动返回退出事件(uni-app,微信小程序,page-container)

    1、使用page-container前先在pages.json配置(重点!) 2、在页面中配置 @touchstart.native和@touchmove.native是用于遮罩层滑动的监听事件 关于page-container 的一些属性 详细可以按照官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/page-container.html

    2024年02月11日
    浏览(44)
  • Vue:@click.stop -- 阻止事件向父级元素传递

    最近遇到这么一个问题:有一个父div,包含一个子div。要求单击父div时执行fun()函数,而单击子div时不执行fun()函数。 可以使用 @click.stop 阻止事件向父级元素传递 在Vue中, @click 是一个指令,用于监听元素的点击事件。 @click.stop 是其中的一个修饰符,它的作用是阻止事件冒泡

    2024年02月11日
    浏览(10)
  • uniapp微信小程序中阻止事件冒泡

    uniapp微信小程序中阻止事件冒泡

    开发场景:列表中展示地块的数据信息,用户可以点击列表进入地块的详情界面,也可以点击列表中的星星按钮进行收藏 遇到的问题:每次点击星星的时候,都会触发父级的点击事件,从而进入到详情界面 原本的代码: 我原本想到可以使用 @click.stop 用来阻止时间冒泡,但是

    2024年02月02日
    浏览(46)
  • uniapp开发微信小程序阻止事件冒泡

    uniapp开发微信小程序阻止事件冒泡

        最近在使用uniapp去开发微信小程序     其中不乏遇到一些问题,我都会发出来。     万一自己别的时候忘记,但是需要用了。   uniapp中开发微信小程序,当使用  @click.stop     去阻止事件冒泡的时候 会发现, @click.stop  并没有生效,就很神奇 问题如图: 解决问题方案

    2024年02月12日
    浏览(35)
  • uniapp小程序点击输入框时阻止弹出软键盘

    uniapp小程序点击输入框时阻止弹出软键盘

    如果不需要监听输入框的话可以直接看解决方式3  本人如此 解决方式1:@click更换成@tap 但如果同时子元素是开关等  各需要各的功能的话  解决方式2: 使用微信官方api阻止键盘弹出  hideKeyboard() 解决方式3: 最简单暴力百分百不弹出的方法在此  设置disabled

    2024年02月12日
    浏览(41)
  • 【uniapp 中使用uni-popup阻止左滑退出程序】

    在uniapp中,可以使用uni-app插件uni-popup提供的阻止左滑退出程序的功能。具体步骤如下: 安装uni-popup插件:在HBuilderX编辑器中,打开manifest.json文件,找到“dependencies”字段,在其后添加: “uni-popup”: “^1.4.3” 保存并关闭文件后,HBuilderX会自动安装插件。 在APP.vue中引入uni

    2024年02月13日
    浏览(37)
  • uniapp小程序日历自定义文案,日期上下滑动方式

    uniapp小程序日历自定义文案,日期上下滑动方式

    1、先展示效果图 2、接下来上代码,样式的话自行修改(直接去文件内修改,不影响),将calendar文件下载后导入到自己的components目录下,文件下载放在最后面 3、常用api 参数 说明 类型 默认值 type single表示选择单个日期、multiple表示选择多个日期、range表示选择日期区间 s

    2024年02月16日
    浏览(7)
  • uniapp ----小程序上下滑动页面,视频自动播放(完整代码)
  • uniapp小程序—实现下滑关闭抽屉(包含上下左右滑动)

    uniapp小程序—实现下滑关闭抽屉(包含上下左右滑动)

    操作:点击相应文字时从底部出现弹框,下滑超过一定速率,弹框回到下方隐藏; 这个组件有些多余的地方我没删,可以自行扩展。以下附带移动端的上下左右滑动,可以借鉴实现小程序的左右滑动

    2024年02月13日
    浏览(11)
  • 【uniapp小程序】使用swiper实现页面内部左右滑动的切换

    【uniapp小程序】使用swiper实现页面内部左右滑动的切换

    具体效果:手指在页面左右滑动会切换tab  背景:项目里原有代码复制,去除一些功能,只留一个外壳,目的是为了以后套套套 代码: 注意:scroll-view标签内实现上来加载、下来刷新。因为现在页面用不到,所以并没有保留

    2024年02月12日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包