用swiper写横线滑动标签在浏览器上正常运行但是放到app里面就划不动了的问题

<div class="swiper-container">
				<div class="swiper-wrapper" id="landscape">
					<div class="swiper-slide center">
						<div class="ulDiv">
							你的名字1
						</div>
					</div>
					<div class="swiper-slide center">
						<div class="ulDiv">
							你的名字2
						</div>
					</div>
				
			</div>
			</div>

就是这样的家伙。写的静态页面可以正常滑动。动态生成的在浏览器也可以正常滑动。但是,混合开发时放到移动端的app里就出幺蛾子了。划不动了。为什么呢?因为动态生成的app他不认识,不会执行js了。所以解决方法就是在动态生成完了之后再加下面这么一行东西,就可以了:

 var swiper = new Swiper('.swiper-container', {
			      pagination: {
			        el: '.swiper-pagination',
//			        paginationClickable:true,
			        freeMode:true,
			        paginationClickable:false,
			      },
			    });

如果可以翻白眼儿的话我这白眼儿都要翻上天了。还有mui的slider也一样的会出类似的幺蛾子。但是呢,mui的slider不用生成html后去执行某个js。只用在静态页面加几个可以滑动的就是了。然后生成真正的数据的时候把静态的那几个没用的图清除了就可以了。但是这样有个弊端就是如果网络很卡或者服务器很卡。会出现数据还么出来就看到你那几张静态的图,banner。然后数据加载出来的时候那几张静态图一闪而过,没啦。可能看起来很像bug。但是mui本身也有很多bug

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,下面是一个使用 Vue.js 手实现层叠卡片滑动切换、卡牌动态滑动切换效果的示例: HTML 代码: ```html <div id="app"> <div class="card-container" ref="cardContainer"> <div class="card" v-for="(item, index) in cardList" :key="index" :style="{ zIndex: 100 - index, transform: 'translateX(' + (index - currentIndex) * 20 + 'px) scale(' + (10 - index) / 10 + ')' }"> <div class="card-header">{{ item.title }}</div> <div class="card-body">{{ item.content }}</div> </div> </div> <div class="pagination"> <span class="dot" v-for="(item, index) in cardList" :key="index" :class="{ active: index === currentIndex }" @click="handleDotClick(index)"></span> </div> </div> ``` CSS 代码: ```css .card-container { position: relative; width: 100%; height: 300px; overflow: hidden; } .card { position: absolute; left: 50%; transform-origin: center left; width: 80%; height: 80%; background-color: #fff; border: 1px solid #ccc; border-radius: 5px; box-shadow: 0 0 5px #ccc; padding: 10px; transition: transform 0.5s ease-in-out, z-index 0.5s; } .card-header { font-weight: bold; font-size: 18px; } .card-body { margin-top: 10px; } .pagination { margin-top: 20px; text-align: center; } .dot { display: inline-block; width: 10px; height: 10px; margin: 0 5px; border-radius: 50%; background-color: #ccc; cursor: pointer; } .dot.active { background-color: #333; } ``` JavaScript 代码: ```javascript new Vue({ el: '#app', data: { currentIndex: 0, cardList: [ { title: 'Card Title 1', content: 'Card Content 1' }, { title: 'Card Title 2', content: 'Card Content 2' }, { title: 'Card Title 3', content: 'Card Content 3' }, { title: 'Card Title 4', content: 'Card Content 4' }, { title: 'Card Title 5', content: 'Card Content 5' } ] }, mounted() { this.$refs.cardContainer.addEventListener('mousedown', this.handleMouseDown); this.$refs.cardContainer.addEventListener('mousemove', this.handleMouseMove); this.$refs.cardContainer.addEventListener('mouseup', this.handleMouseUp); this.$refs.cardContainer.addEventListener('mouseleave', this.handleMouseLeave); }, destroyed() { this.$refs.cardContainer.removeEventListener('mousedown', this.handleMouseDown); this.$refs.cardContainer.removeEventListener('mousemove', this.handleMouseMove); this.$refs.cardContainer.removeEventListener('mouseup', this.handleMouseUp); this.$refs.cardContainer.removeEventListener('mouseleave', this.handleMouseLeave); }, methods: { handleDotClick(index) { this.currentIndex = index; }, handleMouseDown(event) { this.mouseDown = true; this.startX = event.clientX; }, handleMouseMove(event) { if (this.mouseDown) { const offsetX = event.clientX - this.startX; this.$refs.cardContainer.style.transform = 'translateX(' + (this.currentIndex * -20 + offsetX) + 'px)'; } }, handleMouseUp(event) { this.mouseDown = false; const offsetX = event.clientX - this.startX; const threshold = this.$refs.cardContainer.offsetWidth / 4; if (offsetX > threshold && this.currentIndex > 0) { this.currentIndex--; } else if (offsetX < -threshold && this.currentIndex < this.cardList.length - 1) { this.currentIndex++; } this.$refs.cardContainer.style.transform = 'translateX(' + (this.currentIndex * -20) + 'px)'; }, handleMouseLeave(event) { this.mouseDown = false; this.$refs.cardContainer.style.transform = 'translateX(' + (this.currentIndex * -20) + 'px)'; } } }); ``` 在这个示例中,我们手实现了层叠卡片滑动切换、卡牌动态滑动切换效果,没有使用 Swiper 插件。具体来说,我们首先在 HTML 中创建了一个 `.card-container` 容器,然后在其中创建了若干个 `.card` 卡片容器,每个卡片容器中包含了一个 `.card-header` 和 `.card-body` 容器作为卡片的内容。我们使用了 Vue.js 的数据绑定机制动态渲染了卡片容器,并使用了 CSS3 的 `transform` 属性和 `z-index` 属性来实现层叠效果。 在 JavaScript 中,我们监听了鼠标的 `mousedown`、`mousemove`、`mouseup` 和 `mouseleave` 事件,并在 `handleMouseDown` 方法中记录了鼠标按下的起始位置,然后在 `handleMouseMove` 方法中根据鼠标移动的距离动态更新卡片容器的 `transform` 属性,实现卡片的动态滑动效果。在 `handleMouseUp` 方法中,我们根据鼠标移动的距离和速度判断当前应该显示哪一个卡片,并根据计算结果更新了 `currentIndex` 属性和卡片容器的 `transform` 属性。在 `handleMouseLeave` 方法中,我们重置了鼠标按下的状态和卡片容器的 `transform` 属性,保证了用户体验的连贯性。最后,我们在 `mounted` 钩子函数中添加了事件监听器,并在 `destroyed` 钩子函数中移除了事件监听器,以避免内存泄漏。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值