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

港控/mmm° 2022-04-24 00:16 209阅读 0赞

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

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

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

### 小结 ###

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