小程序滚动里面catchtap事件苹果手机使用无效

里面catchtap事件苹果手机使用无效

源代码如下:

<scroll-view scroll-y class='scroll'>
	<view class='senceBox'>
		<block>
				<view class='item' data-str='一键关闭所有灯光' catchtap='runsence' bindlongpress="delAOFF" wx:if='{{!KOFF}}'>
					<view class='dname'>灯光全关</view>
					<view class='status'>暂无记录</view>
					<view>
						<image src='http://www.cspugoing.com/img/sence/quanguan.svg?v=1.8.1' mode='widthFix'> </image>
					</view>
				</view>
					<view class='item' data-str='一键关闭所有灯光' catchtap='runsence' bindlongpress="delAOFF" wx:if='{{!KOFF}}'>
					<view class='dname'>灯光全关</view>
					<view class='status'>暂无记录</view>
					<view>
						<image src='http://www.cspugoing.com/img/sence/quanguan.svg?v=1.8.1' mode='widthFix'> </image>
					</view>
				</view>
					<view class='item' data-str='一键关闭所有灯光' catchtap='runsence' bindlongpress="delAOFF" wx:if='{{!KOFF}}'>
					<view class='dname'>灯光全关</view>
					<view class='status'>暂无记录</view>
					<view>
						<image src='http://www.cspugoing.com/img/sence/quanguan.svg?v=1.8.1' mode='widthFix'> </image>
					</view>
				</view>
					<view class='item' data-str='一键关闭所有灯光' catchtap='runsence' bindlongpress="delAOFF" wx:if='{{!KOFF}}'>
					<view class='dname'>灯光全关</view>
					<view class='status'>暂无记录</view>
					<view>
						<image src='http://www.cspugoing.com/img/sence/quanguan.svg?v=1.8.1' mode='widthFix'> </image>
					</view>
				</view>
					<view class='item' data-str='一键关闭所有灯光' catchtap='runsence' bindlongpress="delAOFF" wx:if='{{!KOFF}}'>
					<view class='dname'>灯光全关</view>
					<view class='status'>暂无记录</view>
					<view>
						<image src='http://www.cspugoing.com/img/sence/quanguan.svg?v=1.8.1' mode='widthFix'> </image>
					</view>
				</view>
		</block>
	</view>
</scroll-view>

css样式如下:


.senceBox{
  display: flex;
  width: 100%;
  flex-wrap: wrap;
}

.senceBox .item {
  position: relative;
  display: flex;
  width: 30%;
  height: 238rpx;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-color: rgba(247, 251, 251, 0.8);
  margin-left: 0.5%;
  margin-top: 0.5%;
}

.senceBox .showChose {
  width: 100%;
  position: absolute;
  right: 0rpx;
  z-index: 100;
}

.senceBox .showline {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  height: 81.5rpx;
  padding: 20rpx;
  text-align: center;
}

.senceBox .del {
  background-color: #ec2626;
}

.senceBox .roof {
  background-color: #c0c0c0;
}

.senceBox .item .dname {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 185rpx;
  margin-top: 25rpx;
  text-align: center;
  font-size: 31rpx;
}

.senceBox .item .status {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23rpx;
  color: #565656;
  width: 150rpx;
  text-align: center;
}


.senceBox image {
  width: 80rpx;
  height: 80rpx;
  margin-top: 10rpx;
}

经过定位,发现苹果手机点击事件无效是因为scroll-view的问题,然后去网上搜索了scroll-view苹果手机点击无效的问题,没找到,没办法只能自己动手操作了,经过试验发现scroll-view里面加个view我写的事件就无效,去掉就可以使用了,但是不用view我的需求又达不到,所以最后决定去掉scroll-view自己写改动代码如下:

<view class='senceBox'>
	<view class='item' data-str='一键关闭所有灯光' catchtap='runsence' bindlongpress="delAOFF" wx:if='{{!KOFF}}'>
		<view class='dname'>灯光全关</view>
		<view class='status'>暂无记录</view>
		<view>
			<image src='http://www.cspugoing.com/img/sence/quanguan.svg?v=1.8.1' mode='widthFix'> </image>
		</view>
	</view>
	<view class='item' data-str='一键关闭所有灯光' catchtap='runsence' bindlongpress="delAOFF" wx:if='{{!KOFF}}'>
		<view class='dname'>灯光全关</view>
		<view class='status'>暂无记录</view>
		<view>
			<image src='http://www.cspugoing.com/img/sence/quanguan.svg?v=1.8.1' mode='widthFix'> </image>
		</view>
	</view>
	<view class='item' data-str='一键关闭所有灯光' catchtap='runsence' bindlongpress="delAOFF" wx:if='{{!KOFF}}'>
		<view class='dname'>灯光全关</view>
		<view class='status'>暂无记录</view>
		<view>
			<image src='http://www.cspugoing.com/img/sence/quanguan.svg?v=1.8.1' mode='widthFix'> </image>
		</view>
	</view>
	<view class='item' data-str='一键关闭所有灯光' catchtap='runsence' bindlongpress="delAOFF" wx:if='{{!KOFF}}'>
		<view class='dname'>灯光全关</view>
		<view class='status'>暂无记录</view>
		<view>
			<image src='http://www.cspugoing.com/img/sence/quanguan.svg?v=1.8.1' mode='widthFix'> </image>
		</view>
	</view>
	<view class='item' data-str='一键关闭所有灯光' catchtap='runsence' bindlongpress="delAOFF" wx:if='{{!KOFF}}'>
		<view class='dname'>灯光全关</view>
		<view class='status'>暂无记录</view>
		<view>
			<image src='http://www.cspugoing.com/img/sence/quanguan.svg?v=1.8.1' mode='widthFix'> </image>
		</view>
	</view>
</view>

然后发现了新大陆!!!在css样式里面添加一句overflow-y:scroll就可以实现纵向滚动
css样式:

.senceBox{
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  overflow-y:scroll
}

你可能感兴趣的:(小程序滚动里面catchtap事件苹果手机使用无效)