大致需求:点击搜索按钮,弹出搜索框,输入查找文字,点击搜索按钮,弹出相应的结果
现实情况:页面的列表很长,想要快速找到特定的数列,比较困难,所以就想到了页面快速定位的方法
(1)点击搜索按钮,弹出搜索框,输入文字后,点击搜索按钮就会查找文字:
刚开始这里我不知道怎么实现,想着是不是点击了搜索按钮后,就改变按钮的
id
,然后再写相应的点击相应事件,但是感觉这样又太麻烦,或者就是用户在输入的
a标签的直接用法,也就是瞬间跳转:<a href="#
id
">跳转</a>
在JQ动画中,有一个animate()方法,这个方法是动画效果,使用这个方法可以达到
滚动
效果,具体示例是:
$("#
id
1")....
<span class="querycaption">按省份首字母选择:</span>
<el-radio-group class="selectone" v-model="radioSelectone" >
<el-radio-button v-for="(item,index) of letterList" :key="index" :label="item" @click
scrollTopAnimate(
id
){
this.$nextTick(()=>{
window.scrollTo({top:document.getElementBy
Id
(
id
).offsetTop - 138, behavior: 'smooth'})
// 假如是
指定
的div内的内容
滚动
到
指定
位置
document.querySelector('#se
function autoScrollTop(
id
){
id
=(typeof(
id
)=="undefined"?"main":
id
);
$("html,body").animate({
scrollTop :$("#"+
id
).offset().top-100
var scroll = document.documentElement.scrollTop || document.body.scrollTop; //获取屏幕距离顶部的距离
.js // 下述方法是引入mui+vue的案例 ,展示代码为methods里面的方法
init:f...
小程序中的scrollview是一个常用的组件,可以实现在页面中
滚动
一定的内容。有时候我们需要将scrollview
滚动
到
指定
位置
,这时候可以使用scroll-into-view属性和scroll-into-view-duration属性来实现。
scroll-into-view属性表示需要
滚动
到的目标元素的
id
,我们可以在目标元素中设置该参数来实现
滚动
到该元素
位置
。例如,我们有一个
id
为target的元素,现在需要将scrollview
滚动
到该元素
位置
,代码如下:
<scroll-view scroll-into-view="target"></scroll-view>
scroll-into-view-duration属性表示
滚动
动画的时长,单位为毫秒,默认值为300。如果需要更改动画时长,可以设置该属性的值。例如,将动画时长设置为500ms,代码如下:
<scroll-view scroll-into-view="target" scroll-into-view-duration="500"></scroll-view>
注意,scroll-into-view不仅可以设置元素的
id
,也可以设置某个子节点的
id
,代码如下:
<scroll-view>
<view
id
="sub-view">
<!-- 子节点 -->
</view>
</scroll-view>
<!--
滚动
至子节点 -->
<scroll-view scroll-into-view="sub-view"></scroll-view>
通过设置scroll-into-view属性和scroll-into-view-duration属性,我们可以方便地实现scrollview
滚动
到
指定
位置
的功能。