微信小程序-搜索框定位页面中某个控件

微信小程序-搜索框定位页面中某个控件

.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;
}

注： 一定要使得被定为的控件有滑动条，让控件能够滑动定位，否则无论如何都不会看见效果

小结

欢迎各位大佬提出问题，小弟会一一回复并做出改进，共同进步