微信小程序 scrollView之scroll-into-view跳坑

需求:

实现A页面点击按钮wx.navigateToB页面并定位到view位置。

A.wxml

<button bindtap='clickBtn'>跳转</button>

A.js

clickBtn: function(){
    wx.navigateTo({
        url: '../b/b?viewId=view4' // 参数viewId=定位的位置id
    })
}

B.wxml

<scroll-view  scroll-into-view="{{toView}}" style='height:100%;' scroll-y="true" class="scr">

    <view id='view1' style='200px;'>
        <text>My is View1</text>
    </view>

    <view id='view2' style='200px;'>
        <text>My is View2</text>
    </view>

    <view id='view3' style='200px;'>
        <text>My is View3</text>
    </view>

    <view id='view4' style='200px;'>
        <text>My is View4</text>
    </view>

    <view id='view5' style='200px;'>
        <text>My is View5</text>
    </view>
</scroll-view>

这地方一定一定一定必须必须必须要注意:

1. scroll-into-view 即使是测试也不可写死(组件布局完成后,动态的改变这个scroll-into-view的值,才会跳到索引位置)

2. scroll-y="true" & 固定高度

B.js

Page({
  data: {
      toView:'' // 配置默认显示view
  },
  onLoad: function (options) {
    var id = options.viewId // 定位view的id
    this.setData({
        toView:'id'
    })
  }
})

以上只是大体实现思路,仅供参考~_~

  • 2
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
### 回答1: 在微信小程序中,可以通过绑定数据并使用 wx:for 指令来在 scroll-view 中展示数据。在组件的 data 中声明一个变量来存储数据,然后在 scroll-view 中使用 wx:for 指令绑定该变量。在需要修改数据时,可以在组件的 methods 中定义函数,通过调用 this.setData() 方法来更新数据。 例如: ``` <scroll-view class="scroll-view"> <view wx:for="{{items}}" wx:key="index"> {{item}} </view> </scroll-view> ``` ``` Page({ data: { items: [1, 2, 3, 4, 5] }, updateData: function() { this.setData({ items: [6, 7, 8, 9, 10] }) } }) ``` 在这个例子中,一个叫做 items 的数组存储了数据。 scroll-view 中使用 wx:for 指令绑定了 items 变量,并在每个 view 中显示了数组中的每一项。在需要修改数据时,可以调用 updateData 函数来更新数据。 ### 回答2: 要修改微信小程序scroll-view展示的数据,可以按照以下步骤进行操作: 1. 在小程序的页面文件中找到需要修改scroll-view展示数据的位置。 2. 在该位置定义一个变量,用来存储需要展示的数据。 3. 在小程序的逻辑文件中找到对应的页面逻辑代码,在onLoad或者其他合适的生命周期函数中初始化该变量,并将需要展示的数据赋值给它。 4. 在scroll-view组件中绑定该变量到对应的数据源上,例如使用wx:for指令绑定该变量作为数据源。 5. 在需要修改scroll-view展示数据的地方,通过修改该变量的值来达到更新数据的目的。可以通过setData方法更新变量的值。 6. 在小程序的视图中,使用{{}}插值表达式来动态展示该变量的值,确保scroll-view的内容能够根据该变量的变化而动态更新。例如可以在scroll-view中使用{{item}}来展示变量中的每个数据项。 通过上述步骤,我们可以在微信小程序中实现修改scroll-view展示数据的功能。值得注意的是,要确保数据更新后调用setData方法进行页面更新,以便视图能够正确展示最新的数据。 ### 回答3: 微信小程序中的scroll-view组件是用来展示可滚动的区域的,通常用于展示大量的数据。如果要修改scroll-view展示的数据,可以按照以下步骤操作: 1. 首先,在wxml文件中定义scroll-view组件,并设置id属性,例如 <scroll-view id="scrollView"></scroll-view>。 2. 在对应的js文件中,获取scroll-view组件的实例,使用`wx.createSelectorQuery().select('#scrollView')`来选择该组件,并使用`fields`方法设置需要返回的属性。 3. 使用`exec`方法执行选择器查询,并在`exec`的回调函数中获取scroll-view组件实例。 4. 通过`setData`方法修改scroll-view组件的数据。 具体的代码如下所示: ```javascript // 获取scroll-view组件的实例并修改数据 const scrollView = wx.createSelectorQuery().select('#scrollView'); scrollView.fields({ scrollOffset: true, size: true, scrollHeight: true }).exec(res => { const scrollTop = res[0].scrollTop; // 获取当前滚动距离顶部的距离 const scrollHeight = res[0].scrollHeight; // 获取scroll-view的高度 const size = res[0].size; // 获取scroll-view的宽高 // 根据需要修改scroll-view的数据 const newData = []; // 新的数据 const scrollY = scrollTop + size.height; // 计算滚动到底部的距离 if (scrollY >= scrollHeight) { // 如果滚动到底部,加载更多数据 // 在newData中追加更多数据 } else { // 其他操作 } // 更新scroll-view的数据 this.setData({ scrollViewData: newData }); }); ``` 通过以上步骤,可以在微信小程序中通过修改scroll-view的数据来实现展示不同的内容。需要注意的是,其中的具体操作可能需要根据实际情况进行调整。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

ノBye~

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

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

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

打赏作者

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

抵扣说明:

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

余额充值