uni-app实现页面滚动到指定位置

uni-app实现页面滚动到指定位置

uni.createSelectorQuery().select(".content").boundingClientRect(data=>{//目标节点、也可以是最外层的父级节点

  uni.createSelectorQuery().select(".box1").boundingClientRect((res)=>{//最外层盒子节点
  
    uni.pageScrollTo({
    
      duration:0,//过渡时间必须为0,uniapp bug,否则运行到手机会报错
      
      scrollTop:res.top - data.top,//滚动到实际距离是元素距离顶部的距离减去最外层盒子的滚动距离
      
    })
    
  }).exec()
  
}).exec();
  • 2
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你可以使用uni-app的组件库来实现滑动选框。其中比较常用的组件是uni-popup和uni-picker。 1. 使用uni-popup组件来实现滑动选框的弹出效果。你可以在需要弹出滑动选框的地方添加一个按钮或者输入框,然后在点击或者获取焦点事件中触发uni-popup组件的显示。 2. 在uni-popup组件中,可以使用uni-picker组件来实现滑动选框的内容。uni-picker组件提供了多种类型的选择器,包括滚动选择器、时间选择器等。你可以根据需要选择合适的类型。 3. 在uni-picker组件中,你可以通过设置data属性来指定选项的数据源。可以是一个数组,也可以是一个对象数组,每个选项都可以设置value和label属性来表示选项的值和显示文本。 4. 通过设置uni-picker组件的show属性为true,可以让滑动选框显示出来。当用户选择完毕后,可以通过监听uni-picker组件的confirm事件来获取用户选择的值。 下面是一个简单的示例代码: ```html <template> <view> <button @click="showPicker">打开滑动选框</button> <uni-popup v-model="show" position="bottom"> <uni-picker :data="pickerData" @confirm="onConfirm"></uni-picker> </uni-popup> </view> </template> <script> export default { data() { return { show: false, pickerData: ['选项1', '选项2', '选项3'] } }, methods: { showPicker() { this.show = true; }, onConfirm(value) { console.log('用户选择的值:', value); this.show = false; } } } </script> ``` 以上是一个简单的滑动选框实现的示例,你可以根据自己的需求进行修改和扩展。希望对你有帮助!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值