zoukankan      html  css  js  c++  java
  • scroll-view描点

     wxml

        <view class="activityDetail_bottom_box">
          <view class="tabBox">
            <block wx:for="{{tabList}}" wx:key="{{index}}">
              <view class="tabStyle {{currentValue == 'x'+index ?'activeTab':''}}" bindtap="clickScroll" data-id="{{'x'+index}}">{{item}}</view>
            </block>
          </view>
          <view class="activityDetail_bottom_contentBox">
            <scroll-view scroll-y scroll-into-view="{{toView}}" scroll-with-animation="true" style="height:500px" bindscroll="scrollButton">
              <block wx:for="{{tabList}}" wx:key="{{index}}">
                <view id="{{'x'+index}}">{{item}}</view>
              </block>
            </scroll-view>
          </view>
        </view>

    wxss

    .activityDetail_bottom_box{
      margin-top: 32rpx;
      background: #FFFFFF;
    }
    .activityDetail_bottom_contentBox{
      padding:0 32rpx;
      box-sizing: border-box;
    }
    .activityDetail_bottom_contentBox view{
      height:500px;
      background-color:#f00;
      color:#fff;
      margin-bottom:10px;
    }

    js

     data: {
        bgcolor:true,
        tabList:['详情','须知','推荐'],
        currentValue:'x0',
        toView:''
      },
      // tab
      clickScroll(e){
        let x='x';
        this.setData({
          currentValue: e.currentTarget.dataset.id,
          toView: e.currentTarget.dataset.id
        })
      },
      // 滚动页面
      scrollButton(e){
        let that = this;
        // console.log(e.detail.scrollTop);
        let scrollTop = e.detail.scrollTop;
        if (scrollTop >= 0 && scrollTop < 500){
          that.setData({
            currentValue:'x0'
          })
        } else if (scrollTop >= 500 && scrollTop < 1000){
          that.setData({
            currentValue: 'x1'
          })
        } else if (scrollTop >= 1000){
          that.setData({
            currentValue: 'x2'
          })
        }
      },
  • 相关阅读:
    JS中的constructor与prototype
    HTTP状态码
    CSS HACK 及常见问题
    js常见怪异
    js深拷贝和浅拷贝
    浏览器渲染
    google全球地址大全
    从function前面的!想到的
    2048
    js判定IE
  • 原文地址:https://www.cnblogs.com/hongrun/p/12482758.html
Copyright © 2011-2022 走看看