ビュー レイヤーを作成した後、次の図に示すように、ページ上に不可解な「縦線」が表示されることがわかりました。
この HTML コードは次のように記述されます。
<view class="other-des">
<view class="section">
<text class="section-num">{
{course_info.SectionCount}}</text>
<text class="section-text">节课程</text>
</view>
<view class="section">
<block wx:for="{
{tools.convertToHMS(course_info.Duration)}}" wx:key="index">
<text class="section-num">{
{item}}</text>
<block wx:if="{
{index == 0}}">
<text class="section-text">时</text>
</block>
<block wx:if="{
{index == 1}}">
<text class="section-text">分</text>
</block>
<block wx:if="{
{index == 2}}">
<text class="section-text">秒</text>
</block>
</block>
</view>
<view class="section">
<text class="section-num">{
{course_info.PurchaseMarkup}}</text>
<text class="section-text">人最近购买</text>
</view>
</view>
CSSのスタイルはこんな感じです。
.other-des {
margin-top: 8px;
padding: 20rpx;
display: flex;
justify-content: center;
align-items: center;
}
.section {
flex: 1;
display: flex;
align-items: flex-end;
}
.section-num {
font-size: 32rpx;
color: #000000;
line-height: 32rpx;
}
.section-text {
color: #586470;
font-size: 24rpx;
line-height: 24rpx;
}
実機のデバッグでは「垂直バー」要素は見つかりませんが、それがセクションの一部であることが示されています。この縦線は自分で追加するものではないようで、自分で追加する場合は実機デバッグ時にその要素を探さなければなりません。
インターフェースをクリックしてマウスを垂直線の上に置くと、スクロール バーであることがわかります。マウスで上下にスクロールすることもできます。
なぜここに余分な進行状況バーがあるのでしょうか? 分析したところ、子テキストが親ビューの範囲を超えているためです。親ビューのoverflow: hiddenCSS を設定するために使用します。
overflow: hidden; は、要素のオーバーフロー コンテンツの表示方法を制御する CSS プロパティです。
具体的な機能は以下の通りです。
- 親コンテナに適用すると、コンテナの境界を越えて子要素のコンテンツを非表示にすることができます。
- テキスト コンテナに適用すると、テキスト オーバーフローを省略したり非表示にしたりできます。
- また、スクロール バーの表示を禁止して、スクロールしてもコンテンツが表示されないようにすることもできます。
overflow: hidden; を使用すると、要素の内部コンテンツの表示とオーバーフロー動作を簡単かつ効果的に制御でき、ページ レイアウトと視覚効果にさらに多くのカスタマイズ オプションをもたらします。
セクションに属性設定を追加すると、overflow: hiddenこの問題が解決されます。
.section {
flex: 1;
display: flex;
align-items: flex-end;
overflow: hidden;
}
効果は次のとおりです。
