Introduction to the method of implementing scroll-view to hide the scroll bar in WeChat applet development-Mini Program Development-php.cn

Introduction to the method of implementing scroll-view to hide the scroll bar in WeChat applet development

高洛峰

Release： 2017-03-16 13:47:14

Original

5394 people have browsed it

When developing web pages, they often choose to remove the default scroll bars in the scroll area for the sake of page beauty. One of the ways to implement scroll-view’s hidden scroll bar in WeChat applet:

First, let’s take a look at some of the attributes of scroll-view components

Introduction to the method of implementing scroll-view to hide the scroll bar in WeChat applet development

When using vertical scrolling, you need to give a fixed height and set the height through WXSS.
Let’s look at some simple code examples:

<view class="section">
 <view class="sectiontitle">vertical scroll</view>
 <scroll-view scroll-y="true" style="height: 200px;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
 <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>
 <button size="mini" bindtap="tapMove">click me to scroll</button>
 </view>
</view>
<view class="section section_gap">
 <view class="sectiontitle">horizontal scroll</view>
 <scroll-view class="scroll-view_H" scroll-x="true" style="width: 100%">
 <view id="green" class="scroll-view-item_H bc_green"></view>
 <view id="red" class="scroll-view-item_H bc_red"></view>
 <view id="yellow" class="scroll-view-item_H bc_yellow"></view>
 <view id="blue" class="scroll-view-item_H bc_blue"></view>
 </scroll-view>
</view>

Copy after login

var order = [&#39;red&#39;, &#39;yellow&#39;, &#39;blue&#39;, &#39;green&#39;, &#39;red&#39;]
Page({
 data: {
 toView: &#39;red&#39;,
 scrollTop: 100
 },
 upper: function(e) {
 console.log(e)
 },
 lower: function(e) {
 console.log(e)
 },
 scroll: function(e) {
 console.log(e)
 },
 tap: function(e) {
 for (var i = 0; i < order.length; ++i) {
  if (order[i] === this.data.toView) {
  this.setData({
   toView: order[i + 1]
  })
  break
  }
 }
 },
 tapMove: function(e) {
 this.setData({
  scrollTop: this.data.scrollTop + 10
 })
 }
})
scroll-view

Copy after login

Introduction to the method of implementing scroll-view to hide the scroll bar in WeChat applet development

##The renderings are as follows:

Introduction to the method of implementing scroll-view to hide the scroll bar in WeChat applet development

Note:

(1) Textarea, mao,
canvas, video component cannot be used in scroll-view. (2)
of scroll-init-view takes precedence Level is higher than scroll-top (3) onPullDownRefresh
event cannot be triggered in scroll-view (4) If you want to use pull-down refresh, you must use the scroll of the page. Instead of scroll-view, you can also return to the top of the page by clicking on the top
Status bar

The above is the detailed content of Introduction to the method of implementing scroll-view to hide the scroll bar in WeChat applet development. For more information, please follow other related articles on the PHP Chinese website!