河北建设厅八大员报名网站,可使用虚拟主机,wordpress按钮切换内容,温州自媒体公司之前写代码有个需求#xff1a;左侧是一个菜单#xff0c;右边是内容#xff0c;点击左侧菜单右边内容滚动到对应位置#xff0c;右边内容滚动到某位置时#xff0c;左侧菜单也会选中对应的菜单项。UI如下#xff1a;这是大多网站的移动端都会有的需求。 解决方案一…之前写代码有个需求左侧是一个菜单右边是内容点击左侧菜单右边内容滚动到对应位置右边内容滚动到某位置时左侧菜单也会选中对应的菜单项。UI如下这是大多网站的移动端都会有的需求。 解决方案一
我们可以使用页面锚点的方式来操作就是左边菜单使用a href#推荐1然后右侧内容每个模块使用id属性div id推荐1如此也是可以实现页面滚动联动的。
解决方案二:
使用js操作dom:(我这里使用vue框架)但js操作DOM原理都是相通的相比也能看懂
async getList() {//从后端获取数据let that this;await api.axios({url: /api/list/list}).then((res) {that.listData res.list;that.listBanner res.banner
//这里要在获取到数据后再去拿DOM不然高度是不准确的。setTimeout(function() {
//这里使用vue的ref获取DOMlet rightItem that.$refs.RightList.getElementsByClassName(list-item);let height 0;
//将所有模块的高度获取到后面点击时让右侧滚动到对应高度就行了。Array.from(rightItem).forEach(v {height v.clientHeightthat.allHeight.push(height)})}, 200)})
leftChange(index) { //左侧点击let scrollMax this.rightScroll.maxScrollY; //最大滚动区间
//这个判断是因为我右侧的内容数组第一个是写死的其他的和左侧菜单都是后端返回的if (index 0) {this.$refs.RightList.scrollTo({top: 0})} else {this.$refs.RightList.scrollTo({top: this.allHeight[index 1]})}this.nowIndex index;},ScrollChange(e){//右侧滚动操作let top this.$refs.RightList.scrollTop//console.log(top)this.allHeight.forEach((item,index,arr){if(top arr[index]){
//这个判断是因为我右侧的内容数组第一个是写死的其他的和左侧菜单都是后端返回的if(index0){this.nowIndex 0;}else{this.nowIndex index-1;}}})}
