zoukankan      html  css  js  c++  java
  • 小程序之点击跳转到对应内容

    我在写页面的时候,遇到一个问题,点击不同的按钮,跳转到不同的区域,这个怎么 实现呢?一开始我用了计算的方式,推理出公式,按照ilphone6的标准,功能实现了。

    我本来以为没有问题了,结果换了一个手机,变成了iPhone5,又不对了。因为在wxml中,设置的元素的具体尺寸不同设备有不同的换算比例,那么就不能用具体的公式定义,

    后来,我研究了小程序组件scroll-view。发现如果用这个组件,刚才的所有都不是问题。

    如何实现呢?

    https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html

    这是小程序文档中关于scroll-view的介绍。这里面有一个属性:scroll-into-view

    咋看之下,没感觉什么,但是细细分析,我们发现这个属性可以定位到某个元素的id,那么我们只要给我要找到的元素加上指定的id,用这个属性定位过去,不是就可以做了吗?

    而且官方文档也提供了案例,我按照官网的案例,找到了问题的解决方案,下面我把这个案例呈现出来:

    <view class="section">
      <view class="section__title">vertical scroll</view>
      <scroll-view scroll-y style="height: 200px;" scroll-into-view="{{toView}}" >
        <view id="green" class="scroll-view-item bc_green"></view>
        <view id="red"  class="scroll-view-item bc_red"></view>
        <view id="yellow" class="scroll-view-item bc_yellow"></view>
        <view id="blue" class="scroll-view-item bc_blue"></view>
      </scroll-view>
    
      <view class="btn-area">
        <button size="mini" bindtap="tap">click me to scroll into view </button>
      </view>
    </view>
    var order = ['red', 'yellow', 'blue', 'green', 'red']
    Page({
      data: {
        toView: 'red',
      },
      tap: function(e) {
        for (var i = 0; i < order.length; ++i) {
          if (order[i] === this.data.toView) {
            this.setData({
              toView: order[i + 1]
            })
            break
          }
        }
      }
    })
    
  • 相关阅读:
    48. Rotate Image
    47. Permutations II
    46. Permutations
    45. Jump Game II
    44. Wildcard Matching
    43. Multiply Strings
    42. Trapping Rain Water
    41. First Missing Positive
    40. Combination Sum II
    39. Combination Sum
  • 原文地址:https://www.cnblogs.com/good-qinqin/p/9117385.html
Copyright © 2011-2022 走看看