关于 uview 的indexList跳转不到位的问题:添加方法@select=“clickSelect“

使用uview 的indexList做了一个通讯录列表,但是点击总是无法跳到对应的字母,直接上代码,可以试试clickSelect方法

 clickSelect(e) {
         //从当前位置到达目标位置
         console.log(e)
​         uni
​          .createSelectorQuery()
​          .select('#' + e)
​          .boundingClientRect((data) => {
​             //目标位置的节点:类或者id
​             uni
​              .createSelectorQuery()
​              .select('.container')
​              .boundingClientRect((res) => {
​                 //最外层盒子的节点:类或者id
​                 this.$nextTick(function () {
​                  uni.pageScrollTo({
​                     scrollTop: data.top - res.top,
​                     duration: 0 //app端这个必须设置成0
​                  })
​                 })
​              })
​              .exec()
​          })
​          .exec()
​      }

补上HTML代码:

    <u-index-list :scrollTop="scrollTop" class="container" :index-list="indexList"  
    active-color="#033073" :sticky="sticky" offset-top="100">
        <view v-for="(item,index) in contactsList" :key="item.letter" :id="item.letter">
            <u-index-anchor :index="item.letter" />
            <view class="list-cell" v-for="(ele,i) in item.userInfo" :key="`${ele.userId} + ${ele.nickName}`">
                <view class="list-item"  >
                    <view class="list-item-left" :style="{backgroundColor:ele.color}">
                        <text class="left-name">{{ ele.nickName | setNickName }}</text>
                    </view>
                    <view class="list-item-center">
                        <view class="list-name">
                            <text class="center-name">{{ ele.nickName }}</text>
                            <text class="center-mesh basis-mesh" v-if="ele.roles.length != 0 ">{{ ele.roleName }}</text>
                        </view>
                        <view class="list-mesh" v-if="ele.meshName != ''">
                            <view >
                                <u-image class="content-text" src="/static/icon/icon_user_mesh.png" width="24rpx" height="24rpx"></u-image>
                            </view>
                            <text class="center-mesh mesh">{{ ele.meshName }}</text>
                        </view>
                    </view>
                    <view class="list-item-right" @click="callPhone(ele.phonenumber)">
                         <u-image class="content-text" src="/static/icon/icon_contacts_phone.png" width="80rpx" height="81rpx"></u-image>
                    </view>
                </view>
            </view>
        </view>
    </u-index-list>   

 

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
可以通过以下步骤实现区域分类查询: 1. 在 `data` 中定义两个变量 `selectedGreenhouse` 和 `selectedArea` 来存储用户选择的棚号和区域。 2. 在 `mounted` 生命周期中,调用获取棚号列表和区域列表的接口,并将返回的数据分别赋值给 `greenhouseList` 和 `plantAreaList`。 3. 在模板中,使用 `u-select` 组件分别展示棚号下拉框和区域下拉框,并绑定 `v-model` 属性到 `selectedGreenhouse` 和 `selectedArea` 变量上。 4. 在 `methods` 中定义 `determineGreenHouse` 和 `determineArea` 方法来处理用户选择棚号和区域的操作。这两个方法可以根据选择的棚号和区域,结合后端接口进行数据查询。 5. 在 `cancelShowCharts` 方法中,重置 `selectedGreenhouse` 和 `selectedArea` 变量,以便下一次查询时重新选择。 以下是示例代码: ```html <template> <view> <u-select @confirm="determineGreenHouse" v-model="selectedGreenhouse" :list="greenhouseList" @cancel="cancelShowCharts" mask-close-able="false" ></u-select> <u-select @confirm="determineArea" v-model="selectedArea" :list="plantAreaList" @cancel="cancelShowCharts" mask-close-able="false" ></u-select> </view> </template> <script> export default { data() { return { selectedGreenhouse: '', selectedArea: '', greenhouseList: [], plantAreaList: [], }; }, mounted() { // 调用获取棚号列表和区域列表的接口,并将返回的数据分别赋值给 greenhouseList 和 plantAreaList }, methods: { determineGreenHouse() { // 根据选择的棚号,结合后端接口进行数据查询 }, determineArea() { // 根据选择的区域,结合后端接口进行数据查询 }, cancelShowCharts() { this.selectedGreenhouse = ''; this.selectedArea = ''; }, }, }; </script> ```
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

peachSoda7

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值