WeChat applet swiper prevents manual switching, swiper prevents sliding, and dynamically prevents switching

Talking about logic, there are probably two situations

  • The first is to query product details. If the query is successful, it is necessary to display the trend of this product and the same good things. This is a tab switch

  • The second case is that the query of the product fails, and only the same good product is displayed.

So this is a dynamic control

I started by adding catchtouchmove to the first swiper-item label if the product query failed.

//wxml

<swiper-item class="goods_price" catchtouchmove="stopChange"></swiper-item>

//js

stopChange(){
    
    
    return false
}

It is indeed possible to prevent manual switching, but when the product query is successful, the swiper can't slide to switch. Later, I thought of adding a condition limit, and only returned false when the query failed

stopChange(){
    
    
    if(查询失败){
    
    
        return false
    }
}

But it is of no use, it should be that as long as the catchtouchmove event is added, it cannot slide

So this solution is not feasible

Later, I thought of a not-so-good method, that is, when the query fails, save a state, and then except for the first swiper-item to decide whether to display according to this state, the query fails, no other swiper-items are displayed.
<swiper-item class="goods_price1">
...
</swiper-item>

<swiper-item class="goods_price2" wx:if='{
    
    {查询成功}}'>
...
</swiper-item>

Although this problem is solved, I always feel that this method is not very good.

If there is a better solution, you can comment or private message to exchange it.

Guess you like

Origin blog.csdn.net/glorious_future/article/details/114941937