アプレット部分ページのカスタムスクロールバー

ベースの転がり組立scrollview

scrollviewプロパティ

プロパティ名	効果	パラメータ値
スクロール-X	設定は、水平方向のスクロールを許可します	真/ falseデフォルトはfalseです
スクロール-Y	設定は、垂直スクロールを許可します	真/ falseデフォルトはfalseです
スクロールトップ	スライダーの長手方向の位置が提供され	数
スクロール左	水平スクロールバーの位置が提供されています	数
スクロールにビュー	コントロールを設定するためにスクロールし、前提は、コントロールID内のスクロールを与えるように設定されて	転送制御ID
有効バック・ツー・トップ	アンドリュースは、縦方向のみサポートトップバーをスクロールするときのiOSがトップステータスバーをクリックし、タイトルバーをダブルクリックします	真/ falseデフォルトはfalseです
スクロールして、アニメーション	スクロールバーの位置を設定する際に、アニメーショントランジションを使用します	真/ falseデフォルトはfalseです
bindscrolltoupper	トップ/左トリガーイベントscrolltoupperにスクロール
bindscrolltolower	エンドユニット/右トリガーイベントscrolltolowerにローリング
bindscroll	スクロールトリガー、event.detail = {scrollLeft、scrollTopスプライト、scrollHeight、scrollWidth、DELTAX、deltaY移動}

scrollviewプロパティを使用します

まず、図の効果。

レンダリング.GIF

二、XXX.WXMLレイアウト

<view>scroll-view 横向</view>

<button class='button' type='primary' size='mini' bindtap='scrollToRed'>点我滚动到绿色</button> <button class='button' type='primary' size='mini' bindtap='scrollTo100'>点我滚动100rpx距离</button> <scroll-view scroll-x="true" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-left="{{scrollTop}}"> <view class="scroll-x"> <view wx:for-items="{{scrolls}}" wx:key="name"> <view id="{{item.tag}}" class="{{item.tag}}">{{item.name}}</view> </view> </view> </scroll-view> <view>scroll-view 纵向</view> <scroll-view scroll-y="true" style="height: 500rpx;"> <view class="scroll-y" > <view wx:for-items="{{scrolls}}" wx:key="name"> <view class="{{item.tag}}">{{item.name}}</view> </view> </view> </scroll-view>

、私はscrollviewの主要な特性を説明することがあった、他の読者が読むことができない問題ではありません、私は後で説明していきます

最初の二つScrollView比較上記スクロール-X / Yの属性を見て、我々は違いを見ることができ、横方向の垂直で、このプロパティの図の効果と併せて理解することができます
これは、一般に、ユーザは、イベントが対応するコードを実行するトリガする場合、特定のコードが実行されるロジックはxxx.jsに書き込む始まるイベントを結合するために結合されています
スクロールにビューをスクロールIDに設けられ、toView IDはローリングを渡すために使用されています
スクロール左ローリングの例では蔓延しているので、スクロール左プロパティを使用し、それは垂直スクロール・トップ・プロパティを使用する場合、等号が値によって渡されるので、水平スクロール距離100であれば100を表します
使用竖向滚动时，需要给<scroll-view/>一个固定高度，通过 WXSS 设置 height。

三、XXX.JS逻辑代码

Page({
  data: {
    toView: 'yellow',
    scrollLeft: 0, //滚动的数组 scrolls: [ { name: '黄色', tag: 'yellow', }, { name: '绿色', tag: 'green', }, { name: '红色', tag: 'red', }, { name: '黄色', tag: 'yellow', }, { name: '绿色', tag: 'green', }, { name: '红色', tag: 'red', }, ], }, scrollToRed:function(e) { this.setData({ toView: 'green' }) }, scrollTo100: function (e) { this.setData({ scrollLeft: 100 }) }, upper: function (e) { console.log('滚动到顶部') }, lower: function (e) { console.log('滚动到底部') }, scroll: function (e) { console.log(e) }, })

js代码中需要讲解的地方

data中的数据是给wxml控件赋值的
toView设置跳转到那个控件ID上
scrollLeft设置横向滚动的距离
所有的function方法都是执行触发事件所需要的逻辑
this.setData({ })用于更新数据，每次更新都会刷新界面
我把滚动到顶部和底部的触发的事件用日志输出出来，目的是让读者看一下确实执行了相应的事件，我为了让读者看清楚，我注释掉滚动的输出日志，读者可以打开，会输出一系列滚动的位置

输出日志.png

四、XXX.WXSS样式

.button
{
  margin: 20rpx;
}
.scroll-x {
  display: flex; flex-direction: row; } .scroll-y { display: flex; flex-direction: column; } .green { display: flex; align-items: center; width: 400rpx; height: 400rpx; background: green; } .red { display: flex; align-items: center; width: 400rpx; height: 400rpx; background: red; } .yellow { display: flex; align-items: center; width: 400rpx; height: 400rpx; background: yellow; }

样式这边就先教大家几个常用的样式

display属性
- none:此元素不会被显示
- block：两个元素自动换行
- inline：两个元素靠在一起
- inherit：继承父类
- flex：多栏多列
flex-direction属性
- column 垂直分布
- row 水平分布
align-items 设置item对齐方式
- center
- left
- right

上面三个属性在布局的时候一定会用到的，今天就先说这几个属性，请初学者一定要记住并学会运用到项目中

アプレット部分ページのカスタムスクロールバー

scrollviewプロパティ

scrollviewプロパティを使用します

おすすめ