在我们使用catch:touchstart时,是可以阻止遮罩层后的页面滚动,但是又带来另一个问题,就是子元素的事件失效,以点击事件举例:
使用catch:touchstart的代码
1 view class="Mselect" catch:touchstart="prohibit">
2 view class="left_image"> 3 image src="../../images/shoping.png">image> 4 view> 5 view class="text_content"> 6 view style="color:#FF5656">{{'¥509-699'}}view> 7 view style="color:#9a9a9a;font-size:20rpx">{{'请选择颜色 净含量'}}view> 8 view> 9 商品规格 --> 10 view class="select_color"> 11 view class="goods_title">颜色view> 12 view class="goods_grid"> 13 view bind:tap="fn">红色view> 14 view>白色view> 15 view class="select_text">黑色view> 16 view> 17 view> 18 净含量 --> 19 view class="goods_net select_color"> 20 view class="goods_title">净含量view> 21 view class="goods_grid"> 22 view>36mlview> 23 view class="select_text">90mlview> 24 view> 25 view> 26 数量选择 --> 27 view class="goods_num select_color"> 28 view class="goods_title">数量view> 29 view class="num"> 30 text class="numreduce">-text> 31 text class="block">{{2}}text> 32 text class="numreduce numplus">+text> 33 view> 34 view> 35 view class="typeedit"> 36 view>加入购物车view> 37 view>立即购买view> 38 view> 39 view>
此时就会出现无论点击子元素什么地方都会出现 // 这是我自己写的方法
那么只需要修改一行代码就能运行
只需要在父元素上更改事件即可解决
bind:touchstart catch:touchmove bind:touchend
1 view class="Mselect" bind:touchstart catch:touchmove bind:touchend> 2 view class="left_image"> 3 image src="../../images/shoping.png">image> 4 view> 5 view class="text_content"> 6 view style="color:#FF5656">{{'¥509-699'}}view> 7 view style="color:#9a9a9a;font-size:20rpx">{{'请选择颜色 净含量'}}view> 8 view> 9 商品规格 --> 10 view class="select_color"> 11 view class="goods_title">颜色view> 12 view class="goods_grid"> 13 view bind:tap="fn">红色view> 14 view>白色view> 15 view class="select_text">黑色view> 16 view> 17 view> 18 净含量 --> 19 view class="goods_net select_color"> 20 view class="goods_title">净含量view> 21 view class="goods_grid"> 22 view>36mlview> 23 view class="select_text">90mlview> 24 view> 25 view> 26 数量选择 --> 27 view class="goods_num select_color"> 28 view class="goods_title">数量view> 29 view class="num"> 30 text class="numreduce">-text> 31 text class="block">{{2}}text> 32 text class="numreduce numplus">+text> 33 view> 34 view> 35 view class="typeedit"> 36 view>加入购物车view> 37 view>立即购买view> 38 view> 39 view>
打印fn输出
参与评论
手机查看
返回顶部