孤卷残梦饮一池恨 2020-11-20 11:27 采纳率: 80%
浏览 902
已结题

微信小程序实现上下滑动tabs样式切换

如何实现像微信小程序【粤省事】的上下滑动切换tabs的效果,点击切换内容的效果,需要详细的代码效果,我目前可以做到滑动样式切换,但点击后有一点问题  

//点击切换内容
	handleTabClick: function (event) {
		this.setData({
			currentTab: event.currentTarget.dataset.current
		});
	},

// 上下滑动切换
	slideSwitch() {
		let _this=this
		console.log("+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++")
		slide_switch=	wx.createIntersectionObserver(_this, 
			 {
				// thresholds:[0.05,0.2],initialRatio:0.5,
			observeAll: true
		})
		slide_switch.relativeTo('.line_line',{bottom:7})
		slide_switch.relativeToViewport()
		slide_switch.observe('.commonly-item', (res) => {
			console.log("相交值before:"+this.data.activeTab, res)
			// if (res.intersectionRatio > 0) {
				_this.setData({
					activeTab:  res.dataset.index,
			})
			console.log("相交值after:"+this.data.activeTab)
			// }
		})
	},
	
  • 写回答

2条回答 默认 最新

  • Rattenking Python领域优质创作者 2020-11-26 14:12
    关注

    colorUI有这个效果,直接参考他的源码,不难!

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 3月29日
  • 已采纳回答 3月21日

悬赏问题

  • ¥15 C++/QT设置函数调用条件(多个功能调用同一,且各自调用条件不同)
  • ¥15 UE5样条线生成的网格UV问题
  • ¥15 如何用最短的时间大致看懂springboot+vue的项目
  • ¥15 (有偿)懂数值分析和含时变参数微分方程的来
  • ¥15 layui父页的数据表格如何用弹窗页提交后的查询数据来更新数据表格内容?
  • ¥15 abaqus随机生成二维颗粒
  • ¥15 安装ansys许可证管理器时出现了这个问题,如何解决?
  • ¥100 高价求算法,利用智能手机传感器计算车辆的三轴g值
  • ¥15 Blazor server 数据库操作异常,如何解决?(语言-c#)
  • ¥15 uni-app开发APP运行到浏览器访问接口跨域