mini—Alphabet 字母检索表与小程序联动问题

￡神魔★判官ぃ 2022-10-05 14:46 136阅读 0赞

# mini—Alphabet 字母检索表与小程序联动问题 #

*  小程序：钉钉小程序
 *  问题：该UI库只提供右侧字母检索表，并不提供与页面交互与操作方法，（如图）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjA5NjkwMQ_size_16_color_FFFFFF_t_70]

*  当然做好页面之后必需要进行页面交互，点哪打哪，不然也是摆设。

![\- \[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7MsmCKMK-1623228641832)(C:\\Users\\Lenovo\\AppData\\Roaming\\Typora\\typora-user-images\\image-20210609164022688.png)\]][- _img-7MsmCKMK-1623228641832_C_Users_Lenovo_AppData_Roaming_Typora_typora-user-images_image-20210609164022688.png]

*  页面搭建后问题出现：该检索表点击后只会返回一个点击的字母以及index（我没用上），点击跳转实现也不困难：

<block a:if="{
       {currentTab === 'citys'}}">
    		//此处为字母检索表    
          <view class="right_position">
            <alphabet alphabet="{
       {alphabet}}" onClick="onAlphabetClick"></alphabet>
          </view>
          <list a:for="{
       {sortList}}">
              //此处为页面列表中的表头
            <view slot="header" class="{
       {item.firstLetter}}">
    				  {
       {item.firstLetter}}
            </view>
            <list-item a:for="{
       {item.cityList}}" onClick="clicklisrcity" data-id="{
       {item.id}}" data-name="{
       {item.nameCh}}" data-type="city">
              {
       {item.nameCh}}
            </list-item>
          </list>
        </block>

*  给列表表头中添加一个class，该class就是字母表头，这样最容易定位到元素。
 *  难点：通过`createSelectorQuery`方法获取dom节点，得到点击元素距离高度，同时通过`pageScrollTo`滚动到目标位置，
    
     *  问题：点击第一次后第二次点击返回是目标节点到当下屏幕高度，再使用`pageScrollTo`会出现跳转到错误位置。（目标元素距离当前屏幕的距离，并非到容器顶部的距离）
     *  解决办法，通过判断是否为第一次点击，不是的话将记录的上一次节点高度加上当前获取的高度（计算高度）

/** * 字母索引点击事件 * */
    
      onAlphabetClick(ev) { 
        let clickdata = '.' + ev.data.item
        console.log(clickdata.item)//获取到的class名称
           /** * 如果已经是第二次点击了，进行高度计算，并且保存计算结果 * */
        if (this.data.chooseToTop) { 
          dd.createSelectorQuery().selectAll(clickdata).boundingClientRect().exec((ret) => { 
            dd.pageScrollTo({ 
              scrollTop: this.data.chooseToTop + ret[0][0].top
            })
            this.setData({ 
              chooseToTop: this.data.chooseToTop + ret[0][0].top
            })
          });
        } else { 
           /** * 首次点击，不会出现高度错误，直接使用 * */
          dd.createSelectorQuery().selectAll(clickdata).boundingClientRect().exec((ret) => { 
            dd.pageScrollTo({ 
              scrollTop: ret[0][0].top
            })
            this.setData({ 
              chooseToTop: ret[0][0].top
            })
          });
        }
      },

*  这样就可以避免乱跳了。
 *  如果有更好的方法请指出。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjA5NjkwMQ_size_16_color_FFFFFF_t_70]: /images/20221005/4b23d0351c3d416e8c1a124b19b11db4.png
[- _img-7MsmCKMK-1623228641832_C_Users_Lenovo_AppData_Roaming_Typora_typora-user-images_image-20210609164022688.png]: /images/20221005/f368dc9e07bb443688f3ce07e27384c3.png