微信小程序横向滚动Scroll-view，左侧固定右侧滚动视图详解

最新推荐文章于 2024-08-12 17:54:40 发布

uzhongbut

最新推荐文章于 2024-08-12 17:54:40 发布

阅读量6k

点赞数

文章标签：微信小程序 scroll-view 横向滚动

本文链接：https://blog.csdn.net/uzhongbut/article/details/83271060

版权

微信小程序专栏收录该内容

2 篇文章 0 订阅

订阅专栏

微信小程序横向滚动Scroll-view 在这里插入图片描述

<view class="horizontal-scroll">
  <view class="fixed-content">
    <view class="th" bindtap="showAll">课程代码及名称</view>
    <view class="td" bindtap="showAll">00597英语写作</view>
    <view class="td" bindtap="showAll">04729大学语文</view>
    <view class="td" bindtap="showAll">00831英语语法</view>
    <view class="td" bindtap="showAll">01232毛泽东与马克思主义思想概论</view>
  </view>
  <view class="scroll-content">
    <scroll-view class="scroll-view_w" scroll-x style="width:100%">
      <view class="item">
        <view class="th">成绩</view>
        <view class="td">98</view>
        <view class="td">69</view>
        <view class="td">64</view>
        <view class="td">98</view>
      </view>
      <view class="item">
        <view class="th">考试年月</view>
        <view class="td">201804</view>
        <view class="td">201804</view>
        <view class="td">201804</view>
        <view class="td">201804</view>
      </view>
      <view class="item">
        <view class="th">考试时间</view>
        <view class="td">7日09：00-11：00</view>
        <view class="td">7日14：00-16：00</view>
        <view class="td">8日09：00-11：00</view>
        <view class="td">8日14：00-16：00</view>
      </view>
      <view class="item">
        <view class="th">课程代码及名称</view>
        <view class="td">00597英语写作</view>
        <view class="td">04729大学语文</view>
        <view class="td">00831英语语法</view>
        <view class="td">01232毛泽东与马克思主义思想概论</view>
      </view>
    </scroll-view>
  </view>
</view>

css样式：

.horizontal-scroll {
  overflow: hidden;
}

.fixed-content {
  float: left;
  width: 35%;
}

.scroll-content {
  float: left;
  width: 65%;
}

.scroll-view_w {
  width: 100%;
  white-space: nowrap;
}

.scroll-view_w .item {
  width: 100px;
  display: inline-block;
}

.horizontal-scroll .th {
  background: #f5f5f5;
  height: 40px;
  padding:0 10px;
  line-height: 40px;
  text-align: center;
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.horizontal-scroll .td {
  background: #fff;
  padding:0 10px;
  font-size: 15px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-bottom:1rpx solid #eee;
}
.horizontal-scroll .td:nth-last-child(2n+1){
  background: #fafafa;
}