微信小プログラムscroll-viewのスクロールバーの設定が実現されます。
2941 ワード
小さいプログラムのscroll-viewは多く使われています。リストページは普通スクロールバーを管理していません。最近、Androidとiosの中で横方向にスライドする時の表現が違っていることが分かりました。違うところはどこですか?iosでは直接に表示されません。誰もいません。深く考えてみましたが、このスクロールバーは色を変えたり、形を変えたりできますか?この衝動があったらすぐに直します。
1です。公式のデモを直接開いて、公式文書をよく見ましたが、何の説明もありません。これは公式文書の一貫したやり方です。スクロールバーの表示/非表示を制御する属性はありません。だから文書は期待できません。
2です。コンポーネントなら、cssでコントロールします。またcssの中のscrollの紹介を見に行きます。大体以下の属性があります。参照リンク。
上図の位置<1>:-webkit-scrollbarスクロールバーの全体部分。
上図の位置<2>:-webkit-scrollbar-buttonスクロールバーのレールの両端ボタンをクリックすることにより、ミニチュアの位置を調整することができます。
上図の位置<3>:-webkit-scrollbar-cornerの角、つまり2つのスクロールバーの交差点です。
上図の位置<4>:-webkit-scrollbar-thumb スクロールバーの中のブロックは、上下に移動できます。
上図位置<5>:-webkit-scrollbar-track スクロールバーのレール(中にはthumbがあります)。
上図の位置<6>:-webkit-scrollbar-troc-piece内层轨道、スクロールバーの中间部分(除去)。
でも、直接に小さいプログラムで見ることもできます。
3です。上は正常cssの使い方ですが、小プログラムではどう使いますか?同じように、wxssに書いてください。
スライダーを隠す:
4.すでに成功したと思いましたが、私の小さい6を取り出してプレビューを掃除して、口の上でにこにこして、心の中のMMP。ふふっ!何とかしてください
探してみましたが、どうして横向きのスクロールバーが隠れているのか分かりました。ここを見てください。
元の内容は:
もういいです。iosはむやみに振り回さないでください。効果が欲しいなら、カスタムします。
最近、小さいプログラムを最適化して、scroll-viewの二つの問題を発見しました。
1、IOS携帯の下でscroll-viewはアップロード時にカートンが存在します。
一時解決方法(高さ100%設定、問題:設定後にタッチアップイベントをトリガできません):
いい解決方法が見つからないので、scroll-viewの代わりにviewを使うしかないです。
ここで、微信小プログラムのscroll-viewのスクロールバーの設定が実現された記事について紹介します。より多くの関連小プログラムのscroll-viewスクロールバーの内容は以前の文章を検索してください。または下記の関連記事を引き続きご覧ください。これからもよろしくお願いします。
1です。公式のデモを直接開いて、公式文書をよく見ましたが、何の説明もありません。これは公式文書の一貫したやり方です。スクロールバーの表示/非表示を制御する属性はありません。だから文書は期待できません。
2です。コンポーネントなら、cssでコントロールします。またcssの中のscrollの紹介を見に行きます。大体以下の属性があります。参照リンク。
上図の位置<1>:-webkit-scrollbarスクロールバーの全体部分。
上図の位置<2>:-webkit-scrollbar-buttonスクロールバーのレールの両端ボタンをクリックすることにより、ミニチュアの位置を調整することができます。
上図の位置<3>:-webkit-scrollbar-cornerの角、つまり2つのスクロールバーの交差点です。
上図の位置<4>:-webkit-scrollbar-thumb スクロールバーの中のブロックは、上下に移動できます。
上図位置<5>:-webkit-scrollbar-track スクロールバーのレール(中にはthumbがあります)。
上図の位置<6>:-webkit-scrollbar-troc-piece内层轨道、スクロールバーの中间部分(除去)。
でも、直接に小さいプログラムで見ることもできます。
3です。上は正常cssの使い方ですが、小プログラムではどう使いますか?同じように、wxssに書いてください。
スライダーを隠す:
::-webkit-scrollbar
{
width: 0;
height: 0;
color: transparent;
}
またはDIY:
/* */
::-webkit-scrollbar
{
width: 6px;
height: 6px;
background-color: #ffffff;
}
/* + */
::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: yellow;
}
/* + */
::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 10px rgba(0,0,0,.3);
background-color: #ff5500;
}
上記の表記はandroidおよび開発ツールで効果が一致しています。4.すでに成功したと思いましたが、私の小さい6を取り出してプレビューを掃除して、口の上でにこにこして、心の中のMMP。ふふっ!何とかしてください
探してみましたが、どうして横向きのスクロールバーが隠れているのか分かりました。ここを見てください。
元の内容は:
もういいです。iosはむやみに振り回さないでください。効果が欲しいなら、カスタムします。
最近、小さいプログラムを最適化して、scroll-viewの二つの問題を発見しました。
1、IOS携帯の下でscroll-viewはアップロード時にカートンが存在します。
一時解決方法(高さ100%設定、問題:設定後にタッチアップイベントをトリガできません):
<scroll-view scroll-y="true" style="height:100%">
</scroll-view>
2、IOS携帯ではscroll-viewが存在します。navigator-hoverのcssを触発しません。いい解決方法が見つからないので、scroll-viewの代わりにviewを使うしかないです。
ここで、微信小プログラムのscroll-viewのスクロールバーの設定が実現された記事について紹介します。より多くの関連小プログラムのscroll-viewスクロールバーの内容は以前の文章を検索してください。または下記の関連記事を引き続きご覧ください。これからもよろしくお願いします。