小程序顶部固定且可以滚动

最新推荐文章于 2022-12-27 22:50:21 发布

碉堡飞哥

最新推荐文章于 2022-12-27 22:50:21 发布

阅读量4.3k

点赞数

分类专栏：前端小程序

本文链接：https://blog.csdn.net/qq_27064559/article/details/82658357

版权

前端同时被 2 个专栏收录

183 篇文章 3 订阅

订阅专栏

小程序

8 篇文章 0 订阅

订阅专栏

wxml

<scroll-view scroll-x class="scroll-header">
  <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>
  <view id="blue" class="scroll-view-item bc_blue"></view>
  <view id="blue" class="scroll-view-item bc_blue"></view>
  <view id="blue" class="scroll-view-item bc_blue"></view>
  <view id="blue" class="scroll-view-item bc_blue"></view>
</scroll-view>

<view class='contentView'>
<view>111</view><view>111</view><view>111</view><view>111</view><view>111</view><view>111</view><view>111</view><view>111</view><view>111</view><view>111</view><view>111</view><view>111</view><view>111</view><view>111</view><view>111</view><view>111</view><view>111</view><view>111</view><view>111</view><view>111</view><view>111</view><view>111</view><view>111</view><view>111</view><view>111</view><view>111</view><view>111</view><view>111</view><view>111</view><view>111</view><view>111</view><view>111</view>
</view>

wxss

/* pages/index/index.wxss */
.scroll-header{
  position: fixed;  /* 固定位置 */
  top: 0;
  display: flex;
  white-space: nowrap; /* white-space 属性设置如何处理元素内的空白 */
  background-color: white;
}
.scroll-header view{
  height:128rpx;
  width:128rpx;
  border:1px solid red;
  display: inline-block; 
}
.contentView{
  margin-top: 150rpx;
}