小程序 view、scroll-view组件

墨蓝 2021-07-24 16:19 1103阅读 0赞

*  view组件

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>hover-class</td> 
   <td>指定按下去的样式类。当 hover-class=“none” 时，没有点击态效果</td> 
  </tr> 
  <tr> 
   <td>hover-stop-propagation</td> 
   <td>默认为false,指定是否阻止本节点的祖先节点出现点击态</td> 
  </tr> 
  <tr> 
   <td>hover-start-time</td> 
   <td>50,按住后多久出现点击态,即hover-class生效的时间，单位毫秒</td> 
  </tr> 
  <tr> 
   <td>hover-stay-time</td> 
   <td>400,手指松开后点击态保留时间，即hover-class生效的时间，单位毫秒</td> 
  </tr> 
 </tbody> 
</table>

*  scroll-view  
     必须要设置scroll-x/scroll-y才能进行滑动

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>scroll-x</td> 
   <td>boolean,false</td> 
   <td>允许横向滚动</td> 
  </tr> 
  <tr> 
   <td>scroll-y</td> 
   <td>boolean,false</td> 
   <td>允许纵向滚动</td> 
  </tr> 
  <tr> 
   <td>upper-threshold</td> 
   <td>number/string,50</td> 
   <td>距顶部/左边多远时，触发 scrolltoupper 事件</td> 
  </tr> 
  <tr> 
   <td>lower-threshold</td> 
   <td>number/string,50</td> 
   <td>距底部/右边多远时，触发 scrolltolower 事件</td> 
  </tr> 
  <tr> 
   <td>scroll-top</td> 
   <td>number/string</td> 
   <td>设置竖向滚动条位置</td> 
  </tr> 
  <tr> 
   <td>scroll-left</td> 
   <td>number/string</td> 
   <td>设置横向滚动条位置</td> 
  </tr> 
  <tr> 
   <td>scroll-into-view</td> 
   <td>string</td> 
   <td>值应为某子元素id(id不能以数字开头,且不需#号)。设置哪个方向可滚动，则在哪个方向滚动到该元素,若同时设置了scroll-top则scroll-top优先级更高</td> 
  </tr> 
  <tr> 
   <td>scroll-with-animation</td> 
   <td>boolean,false</td> 
   <td>在设置滚动条位置时使用动画过渡</td> 
  </tr> 
  <tr> 
   <td>enable-back-to-top</td> 
   <td>boolean,false</td> 
   <td>iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向</td> 
  </tr> 
  <tr> 
   <td>enable-flex</td> 
   <td>boolean,false</td> 
   <td>启用 flexbox 布局。开启后,当前元素必须声明display: flex 则会成为 flex container，并作用于其孩子节点。</td> 
  </tr> 
  <tr> 
   <td>scroll-anchoring</td> 
   <td>boolean,false</td> 
   <td>开启 scroll anchoring 特性，即控制滚动位置不随内容变化而抖动，仅在 iOS 下生效，安卓下可参考 CSS overflow-anchor 属性。</td> 
  </tr> 
  <tr> 
   <td>refresher-enabled</td> 
   <td>boolean,false</td> 
   <td>开启自定义下拉刷新，即默认会有。。。的加载器</td> 
  </tr> 
  <tr> 
   <td>refresher-threshold</td> 
   <td>number,45</td> 
   <td>设置自定义下拉刷新阈值</td> 
  </tr> 
  <tr> 
   <td>refresher-default-style</td> 
   <td>string,“black”</td> 
   <td>设置自定义下拉刷新默认样式，支持设置 black 、white 、 none, none 表示不使用默认样式即。。。消失但依然有下拉的占位呈现</td> 
  </tr> 
  <tr> 
   <td>refresher-background</td> 
   <td>string,"#FFF"</td> 
   <td>设置自定义下拉刷新区域背景颜色,即。。。加载器所在区域的颜色</td> 
  </tr> 
  <tr> 
   <td>refresher-triggered</td> 
   <td>boolean,false</td> 
   <td>设置当前下拉刷新状态,true/false即下拉状态指示器是否显示和恢复,在自定义下拉的对应钩子中改变状态才有效,在默认的钩子中改变中无效</td> 
  </tr> 
  <tr> 
   <td>enhanced</td> 
   <td>boolean,false</td> 
   <td>启用 scroll-view 增强特性，启用后可通过 ScrollViewContext 操作 scroll-view,详细在下面</td> 
  </tr> 
  <tr> 
   <td>bounces</td> 
   <td>boolean,true</td> 
   <td>iOS 下 scroll-view 边界弹性控制 (同时开启 enhanced 属性后生效)</td> 
  </tr> 
  <tr> 
   <td>show-scrollbar</td> 
   <td>boolean,true</td> 
   <td>滚动条显隐控制 (同时开启 enhanced 属性后生效),开发者工具上暂时测试无效,真机有效</td> 
  </tr> 
  <tr> 
   <td>paging-enabled</td> 
   <td>boolean,false</td> 
   <td>分页滑动效果 (同时开启 enhanced 属性后生效),即滑动一定距离自动到下一个元素,轮播图类似效果</td> 
  </tr> 
  <tr> 
   <td>fast-deceleration</td> 
   <td>boolean,false</td> 
   <td>滑动减速速率控制 (同时开启 enhanced 属性后生效)</td> 
  </tr> 
  <tr> 
   <td>binddragstart</td> 
   <td>fn</td> 
   <td>滑动开始事件 (同时开启 enhanced 属性后生效),e新增属性detail { scrollTop, scrollLeft },开发者工具暂时不输出,真机有效</td> 
  </tr> 
  <tr> 
   <td>binddragging</td> 
   <td>fn</td> 
   <td>滑动事件 (同时开启 enhanced 属性后生效),e新增属性detail { scrollTop, scrollLeft }</td> 
  </tr> 
  <tr> 
   <td>binddragend</td> 
   <td>fn</td> 
   <td>滑动结束事件 (同时开启 enhanced 属性后生效),e新增属性detail { scrollTop, scrollLeft }</td> 
  </tr> 
  <tr> 
   <td>bindscrolltoupper</td> 
   <td>fn</td> 
   <td>滚动到顶部/左边时触发</td> 
  </tr> 
  <tr> 
   <td>bindscrolltolower</td> 
   <td>fn</td> 
   <td>滚动到底部/右边时触发</td> 
  </tr> 
  <tr> 
   <td>bindscroll</td> 
   <td>fn</td> 
   <td>滚动时触发,event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}</td> 
  </tr> 
  <tr> 
   <td>bindrefresherpulling</td> 
   <td>fn</td> 
   <td>自定义下拉刷新控件被下拉</td> 
  </tr> 
  <tr> 
   <td>bindrefresherrefresh</td> 
   <td>fn</td> 
   <td>自定义下拉刷新被触发</td> 
  </tr> 
  <tr> 
   <td>bindrefresherrestore</td> 
   <td>fn</td> 
   <td>自定义下拉刷新被复位</td> 
  </tr> 
  <tr> 
   <td>bindrefresherabort</td> 
   <td>fn</td> 
   <td>自定义下拉刷新被中止</td> 
  </tr> 
 </tbody> 
</table>

1.  自定义事件触发也会触发配置的默认事件,但默认事件中对自定义下拉状态refresher-triggered的设置无效

ScrollViewContext

*    增强 ScrollView 实例，可通过 wx.createSelectorQuery 的 NodesRef.node 方法获取。 仅在 scroll-view 组件开启 enhanced 属性后生效。

wx.createSelectorQuery()
    	  .select('#scrollview')
    	  .node()
    	  .exec((res) => { 
    	    const scrollView = res[0].node;
    	    scrollView.scrollEnabled = false;
    	  })

<table> 
 <thead> 
  <tr> 
   <th>属性/方法</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>scrollEnabled</td> 
   <td>boolean滚动开关</td> 
  </tr> 
  <tr> 
   <td>bounces</td> 
   <td>boolean设置滚动边界弹性 (仅在 iOS 下生效)</td> 
  </tr> 
  <tr> 
   <td>showScrollbar</td> 
   <td>boolean设置是否显示滚动条</td> 
  </tr> 
  <tr> 
   <td>pagingEnabled</td> 
   <td>boolean分页滑动开关</td> 
  </tr> 
  <tr> 
   <td>fastDeceleration</td> 
   <td>boolean设置滚动减速速率</td> 
  </tr> 
  <tr> 
   <td>decelerationDisabled</td> 
   <td>boolean取消滚动惯性 (仅在 iOS 下生效)</td> 
  </tr> 
  <tr> 
   <td>ScrollViewContext.scrollTo(Object object);</td> 
   <td>滚动至指定位置,object{top:number,left:number,velocity:初速度number,duration:滚动动画时长,animated:是否启用滚动动画}</td> 
  </tr> 
  <tr> 
   <td>ScrollViewContext.scrollIntoView(string selector)</td> 
   <td>id选择器需要加#,滚动至指定位置</td> 
  </tr> 
 </tbody> 
</table>

代码示例:

<scroll-view 
        class="sv"
        scroll-y
        upper-threshold="100"
        bindscrolltoupper="top"
        enable-flex
    
        scroll-with-animation
        refresher-enabled
        
        refresher-background="blue"
        refresher-triggered="{ {flag}}"
    
    
        enhanced
        binddragstart="enTop"
        binddragging="enTop"
      >
        <view class="s-i">s1</view>
        <view class="s-i">s2</view>
        <view class="s-i" id='bot'>s3</view>
      </scroll-view>
    
    Page({ 
      data: { 
        po:"bot",
        flag:true,
        sflag:false
      },
      onLoad() { 
        if (wx.getUserProfile) { 
          this.setData({ 
            canIUseGetUserProfile: true
          })
        }
    
        wx.createSelectorQuery()
        .select('.sv')
        .node()
        .exec((res) => { 
          const scrollView = res[0].node;
          // scrollView.scrollIntoView("#bot")
          scrollView.showScrollbar=true;
          scrollView.pagingEnabled=true;
        })
      },
      top(e){ 
        console.log(e);
        console.log(this.data.flag);
        this.setData({ },()=>{ 
          console.log(this.data.flag);
        })
      },
      myTop(e){ 
        console.log("自定义")
        console.log(e);
        this.setData({ flag:false})
      },
      enTop(e){ 
        console.log(e);
      }
    })