微信小程序切换如何实现

微信小程序切换如何实现,第1张

1、在手机上打开微信,找到小程序选项,并点击进入。

2、在打开的小程序界面中,点击一个小程序进入。

3、在小程序的界面中,点击右上角的退出选项。

4、之后返回到小程序界面,选择一个需要切换的小程序,并点击进入。

5、之后即可完成小程序的切换。

微信小程序Swiper做Tab切换,带tab切换动画

小程序中我们做tab切换一般情况下可以做点击切换,但是有Swiper组件,其实我们也可以做滑动切换

监听Swiper的bindchange,我们就可以在切换时改变tab的选装状态达到切换的目的。

但是这样的方式tab的切换方式是跳转式的,体验不是很好。于是就有了这个demo,我们一步步优化切换体验。

首先:利用flex布局,做出tab区域,如果tab选项卡很多可以使用Scroll-view;一般的跳转式的tab用boder-bottom实现就好,这里我们加了一个“navbar-slider”,加上translateX动画实现平移切换。

然后:计算出每个tabItem的宽度,和每个item距离0坐标的距离;下中50是slider的宽度,对应上面“width:50px”

关联:1、监听item点击,切换swiper;2、监听swiper切换改变slider位置和tab显示

效果展示如下:

现在我们已经实现了,Swiper和tab的带动画联动,但是我们可以发现,我们的切换动画是在切换之后进行的,我们这里还可以继续优化。

swiper在切换时可以监听bindtransition,swiper-item 的位置发生改变时会触发 transition 事件,event.detail = {dx: dx, dy: dy},dx则是平移的偏移量,我们可以通过这个监听来实时设置slider的位置。

切换后校正slider的位置,这里我们不能使用bindchange来校正,因为bindchange在切换时手指释放的时候就调用了,我们这里使用bindanimationfinish回调来校正(动画结束时会触发 animationfinish 事件,event.detail 同上)

最终:展示如下

在小程序开发文档中明确说明了最好不要频繁调用setData,我们最后这种方式就会频繁的调用,所以这里其实只是提供这种思路,但是工程中并不建议这么使用

小程序开发者文档

SwiperTab

没有太明白你的问题。个人猜测是希望第一个switch成功输入后,方可进入到第二个。

解决方法:添加一个循环进行控制,当输入不正确时,不能进行到下一步。

bool isRepeat = true

do {

switch() {

case A:

....

isRepeat = false

break

default:

isRepeat = true

}

while (isRepeat )

参照这个例子修改就可以了


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/11935305.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-19
下一篇 2023-05-19

发表评论

登录后才能评论

评论列表(0条)

保存