微信小程序-搜索框定位页面中某个控件
.js文件
// pages/test/test.js
Page({
data: {
name:'',
flag:'',
//用于for循环遍历
list:[
{
id: 'a',
name: 'a'
},
{
id: 'b',
name: 'b'
},
{
id: 'c',
name: 'c'
},
{
id: 'd',
name: 'd'
},
{
id: 'e',
name: 'e'
},
{
id: 'f',
name: 'f'
},
{
id: 'g',
name: 'g'
},
{
id: 'h',
name: 'h'
},
{
id: 'i',
name: 'i'
},
{
id: 'j',
name: 'j'
},
]
},
//索搜框
input:function(e){
console.log(e)
this.setData({
name:e.detail.value
})
console.log(this.data.name)
},
//查询按钮
search:function(){
var li=this.data.list
var id=''
//查询list中名称相同id定位此控件
for(var i=0;i<li.length;i++){
if(this.data.name==li[i].name){
this.setData({
id: li[i].id
})
}
}
console.log(this.data.id)
}
})
.wxml文件
<view class='container'>
<input placeholder='搜索框' value='{{name}}' bindinput="input"></input>
<button bindtap='search'>搜索</button>
<view class="view">
//scroll-into-view为需要定位的控件,如果查询到该id则开始滑动定位
<scroll-view class='test' scroll-y scroll-into-view="{{id}}" scroll-with-animation="true">
<block wx:for="{{list}}" wx:key="list">
//id用于给控件起一个唯一的名称,不能为数字开头
<view id="{{item.id}}">
<text>{{item.name}}</text>
<text>{{item.id}}</text>
</view>
</block>
</scroll-view>
</view>
</view>
.wxss文件
/*用于控制需要定位的所有控件的区域*/
.view{
width: 5rem;
height: 5rem;
line-height: 1rem;
text-align: center;
background-color: red;
border: black 1rem solid;
}
/*用于控制所定为控件的大小,即for循环遍历的控件*/
.view view{
width: 5rem;
height: 5rem;
}
/*用于控制定位,如没有则回发现控件溢出*/
.test{
flex:1;
}
注: 一定要使得被定为的控件有滑动条,让控件能够滑动定位,否则无论如何都不会看见效果
小结
欢迎各位大佬提出问题,小弟会一一回复并做出改进,共同进步