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

微信小程序实现上下滑动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 06:12
    关注

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

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

报告相同问题?

问题事件

  • 系统已结题 3月28日
  • 已采纳回答 3月21日
手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部