将不可视区域,定位到可视区域
1.利用uniapp,<scroll-view>标签将需要内容包起来
<scroll-view scroll-y="true" :scroll-into-view="intoView" :style="`height:100vh;box-siszing:border-box;margin-right:20rpx`" scroll-with-animation="true" >
//内容区域 注意点:id动态ID的绑定
<view class="box" v-for="(item,index) in list.questions"
:key="index":id='"anchor"+item.id'>
{{item}}
</view>
</scroll-view>
2.需要点击的锚点。给出点击事件
<view :class="!ishow? 'buttontime no_warp':'buttontime auto_x'">
<view class="singlebutton" v-for="(item,index) in list.questions" @click="goAnchor(item.id)">
{{index+1}}
</view>
</view>
3.锚点点击事件js区域
goAnchor(e){
console.log(e);
this.$nextTick(()=>{
this.intoView='anchor'+e
})
}
4.案例,完全代码
<template>
<view>
<view class="header" >
<!-- 试题信息题量 -->
<view class="page_header" >
<view class="quantity">
<span style="font-size: 34rpx;">{{order}}</span>/{{list.subjectnum}}题
</view>
<view class="unfold" @click="isShow()">
<span v-show="!ishow">▼ 展开</span>
<span v-show="ishow">▲收起</span>
</view>
</view>
<!-- 按钮区域 -->
<view :class="!ishow? 'buttontime no_warp':'buttontime auto_x'">
<view class="singlebutton" v-for="(item,index) in list.questions" @click="goAnchor(item.id)">
{{index+1}}
</view>
</view>
</view>
<view class="">
<scroll-view scroll-y="true" :scroll-into-view="intoView" :style="`height:100vh;box-siszing:border-box;margin-right:20rpx`"
scroll-with-animation="true"
>
<view class="box" v-for="(item,index) in list.questions" :key="index" :id='"anchor"+item.id'>
{{item.id}}
</view>
</scroll-view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
intoView:'',
ishow:true,
order:1,
list: {
id: 22,
title: "2109全栈A《Vue移动项目开发》月考123",
info: "2109全栈A《Vue移动项目开发》月考理论",
addtime: "2021-12-12 11:21:24.0",
teacherid: 126,
admin: null,
begintime: "2021-12-07 15:33:59.0",
endtime: "2021-12-02 15:34:03.0",
currenttime: "2022-01-11 13:07",
studentStartTime: "2022-01-11 13:07",
limittime: 120,
order: 1,
aorder: 1,
num: 0,
pastnum: 0,
scores: 100.0,
pastscores: 60.0,
subjectnum: 31,
isshow: 1,
answershow: 2,
studentcounts: 0,
incomplete: 0,
limits: null,
markteachers: null,
students: null,
databaseid: 0,
state: 0,
result: null,
studentIsComplete: 0,
questions: [
{
"id": 40,
"testid": 22,
"title": "子组件向父组件传值,子组件绑定一个事件,通过什么来触发?",
"type": "单选题",
"scores": 2.0,
"answer": "B",
"tags": "",
"explains": "",
"answers": [
{
"id": 149,
"answerno": "A",
"questionid": 40,
"content": "this.$on"
},
{
"id": 150,
"answerno": "B",
"questionid": 40,
"content": "this.$emit()"
},
{
"id": 151,
"answerno": "C",
"questionid": 40,
"content": "this.$bus"
},
{
"id": 152,
"answerno": "D",
"questionid": 40,
"content": "this.$refs"
}
],
"answerid": 0,
"comments": null,
"studentanswer": null,
"studentscores": null
},
{
"id": 41,
"testid": 22,
"title": "子组件向父组件传值,子组件绑定一个事件,通过什么来触发?",
"type": "单选题",
"scores": 2.0,
"answer": "B",
"tags": "",
"explains": "",
"answers": [
{
"id": 149,
"answerno": "A",
"questionid": 40,
"content": "this.$on"
},
{
"id": 150,
"answerno": "B",
"questionid": 40,
"content": "this.$emit()"
},
{
"id": 151,
"answerno": "C",
"questionid": 40,
"content": "this.$bus"
},
{
"id": 152,
"answerno": "D",
"questionid": 40,
"content": "this.$refs"
}
],
"answerid": 0,
"comments": null,
"studentanswer": null,
"studentscores": null
},
{
"id": 42,
"testid": 22,
"title": "子组件向父组件传值,子组件绑定一个事件,通过什么来触发?",
"type": "单选题",
"scores": 2.0,
"answer": "B",
"tags": "",
"explains": "",
"answers": [
{
"id": 149,
"answerno": "A",
"questionid": 40,
"content": "this.$on"
},
{
"id": 150,
"answerno": "B",
"questionid": 40,
"content": "this.$emit()"
},
{
"id": 151,
"answerno": "C",
"questionid": 40,
"content": "this.$bus"
},
{
"id": 152,
"answerno": "D",
"questionid": 40,
"content": "this.$refs"
}
],
"answerid": 0,
"comments": null,
"studentanswer": null,
"studentscores": null
},
{
"id": 43,
"testid": 22,
"title": "子组件向父组件传值,子组件绑定一个事件,通过什么来触发?",
"type": "单选题",
"scores": 2.0,
"answer": "B",
"tags": "",
"explains": "",
"answers": [
{
"id": 149,
"answerno": "A",
"questionid": 40,
"content": "this.$on"
},
{
"id": 150,
"answerno": "B",
"questionid": 40,
"content": "this.$emit()"
},
{
"id": 151,
"answerno": "C",
"questionid": 40,
"content": "this.$bus"
},
{
"id": 152,
"answerno": "D",
"questionid": 40,
"content": "this.$refs"
}
],
"answerid": 0,
"comments": null,
"studentanswer": null,
"studentscores": null
},
{
"id": 44,
"testid": 22,
"title": "子组件向父组件传值,子组件绑定一个事件,通过什么来触发?",
"type": "单选题",
"scores": 2.0,
"answer": "B",
"tags": "",
"explains": "",
"answers": [
{
"id": 149,
"answerno": "A",
"questionid": 40,
"content": "this.$on"
},
{
"id": 150,
"answerno": "B",
"questionid": 40,
"content": "this.$emit()"
},
{
"id": 151,
"answerno": "C",
"questionid": 40,
"content": "this.$bus"
},
{
"id": 152,
"answerno": "D",
"questionid": 40,
"content": "this.$refs"
}
],
"answerid": 0,
"comments": null,
"studentanswer": null,
"studentscores": null
},
{
"id": 45,
"testid": 22,
"title": "子组件向父组件传值,子组件绑定一个事件,通过什么来触发?",
"type": "单选题",
"scores": 2.0,
"answer": "B",
"tags": "",
"explains": "",
"answers": [
{
"id": 149,
"answerno": "A",
"questionid": 40,
"content": "this.$on"
},
{
"id": 150,
"answerno": "B",
"questionid": 40,
"content": "this.$emit()"
},
{
"id": 151,
"answerno": "C",
"questionid": 40,
"content": "this.$bus"
},
{
"id": 152,
"answerno": "D",
"questionid": 40,
"content": "this.$refs"
}
],
"answerid": 0,
"comments": null,
"studentanswer": null,
"studentscores": null
},
{
"id": 46,
"testid": 22,
"title": "VueX的actions 描述正确的是?",
"type": "多选题",
"scores": 2.0,
"answer": "A|B|C",
"tags": "",
"explains": "",
"answers": [
{
"id": 153,
"answerno": "A",
"questionid": 41,
"content": "vuex提供了Actions来专门进行异步操作。"
},
{
"id": 154,
"answerno": "B",
"questionid": 41,
"content": "Action 提交的是 mutation,而不是直接变更状态。"
},
{
"id": 155,
"answerno": "C",
"questionid": 41,
"content": "在组件中调用:this.$store.dispatch('increment',10)"
},
{
"id": 156,
"answerno": "D",
"questionid": 41,
"content": "actions方法都有默认的形参:[state] [,payload]"
}
],
"answerid": 0,
"comments": null,
"studentanswer": null,
"studentscores": null
},
{
"id": 47,
"testid": 22,
"title": "以下哪个属于css预编译语言?",
"type": "多选题",
"scores": 2.0,
"answer": "A|B|C",
"tags": "",
"explains": "",
"answers": [
{
"id": 165,
"answerno": "A",
"questionid": 44,
"content": "less"
},
{
"id": 166,
"answerno": "B",
"questionid": 44,
"content": "sass"
},
{
"id": 167,
"answerno": "C",
"questionid": 44,
"content": "scss"
},
{
"id": 168,
"answerno": "D",
"questionid": 44,
"content": "es6"
}
],
"answerid": 0,
"comments": null,
"studentanswer": null,
"studentscores": null
} ,
{
"id": 48,
"testid": 22,
"title": "以下哪个属于css预编译语言?",
"type": "多选题",
"scores": 2.0,
"answer": "A|B|C",
"tags": "",
"explains": "",
"answers": [
{
"id": 165,
"answerno": "A",
"questionid": 44,
"content": "less"
},
{
"id": 166,
"answerno": "B",
"questionid": 44,
"content": "sass"
},
{
"id": 167,
"answerno": "C",
"questionid": 44,
"content": "scss"
},
{
"id": 168,
"answerno": "D",
"questionid": 44,
"content": "es6"
}
],
"answerid": 0,
"comments": null,
"studentanswer": null,
"studentscores": null
} ,
{
"id": 49,
"testid": 22,
"title": "以下哪个属于css预编译语言?",
"type": "多选题",
"scores": 2.0,
"answer": "A|B|C",
"tags": "",
"explains": "",
"answers": [
{
"id": 165,
"answerno": "A",
"questionid": 44,
"content": "less"
},
{
"id": 166,
"answerno": "B",
"questionid": 44,
"content": "sass"
},
{
"id": 167,
"answerno": "C",
"questionid": 44,
"content": "scss"
},
{
"id": 168,
"answerno": "D",
"questionid": 44,
"content": "es6"
}
],
"answerid": 0,
"comments": null,
"studentanswer": null,
"studentscores": null
}
]
}
}
},
methods: {
isShow(){
this.ishow=!this.ishow
},
goAnchor(e){
console.log(e);
this.$nextTick(()=>{
this.intoView='anchor'+e
})
}
}
}
</script>
<style lang="less">
.header{
background-color:#82b1f7;
padding:72rpx 20rpx 38rpx 20rpx;
.page_header{
display: flex;
justify-content:space-between;
color: #fff;
font-size: 27rpx;
}
.buttontime{
padding-top:20rpx;
box-sizing:border-box;
display:flex;
.singlebutton{
color:#fff;
width:70rpx ;
height:70rpx;
background-color:#82b1f7 ;
border-radius:10rpx;
border:1rpx solid #fff;
text-align:center;
line-height:70rpx;
margin-bottom:16rpx;
}
}
}
.no_warp{
flex-wrap:wrap;
.singlebutton{
margin-right:14rpx;
}
}
.auto_x{
flex-wrap:nowrap;
overflow-x: auto;
.singlebutton{
min-width:70rpx ;
margin-right:16rpx;
}
}
.box{
padding: 20rpx;
background-color: palegreen;
margin: 10rpx;
border: 1rpx solid;
height: 500rpx;
}
</style>
5,上面是一个简易的锚点定位,有待优化改善。