微信小程序 scroll-view 滑动可视区域

微信小程序 sroll-view  css属性设置注意事项

1.sroll-view 必须设置 white-space: nowrap   段落文本中不换行

2.子元素需要设置为 内联块元素 display:inline-block;

3.滑动 list 最外层元素可以添加 移除隐藏避免内容超出 导致排版乱掉 overflow:hidden;

4.内联块元素 无法设置margin-top与margin-right  可以使用padding-top与padding-bottom

<view class='follow-houses-view'>
    <view class='follow-title'>最新信息</view>
    <view class='follow-houses'>
      <scroll-view class="scroll-view_H" scroll-x="true" scroll-with-animation="true" style="white-space: nowrap;" >
          <view id="green" class="follow-scroll" >

            <view class='follow-info-top'>
              <image class='follow-info-img' src='https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1541743618589&di=d2c030db652c4f9749c4d75db6394fbb&imgtype=0&src=http%3A%2F%2Fimg.guidaye.com%2F8feb1093d6ade22720c2b3ce28c6c53d.jpg' ></image>
              <view class='follow-houses-info'> 
                <view class='follow-name'>楼盘</view>
               <view class='follow-position'>长宁区</view> 
                 <view class='follow-show-icon'>   </view>
                <view class='follow-user-num'>200</view> 
              </view>
            </view>
            
            <view class='follow-info-top'>
              <image class='follow-info-img' src='https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1541743618589&di=d2c030db652c4f9749c4d75db6394fbb&imgtype=0&src=http%3A%2F%2Fimg.guidaye.com%2F8feb1093d6ade22720c2b3ce28c6c53d.jpg' ></image>
              <view class='follow-houses-info'> 
                <view class='follow-name'>楼盘</view>
               <view class='follow-position'>长宁区</view> 
                 <view class='follow-show-icon'>   </view>
                <view class='follow-user-num'>200</view> 
              </view>
            </view>
          </view>
      </scroll-view>
    </view>
  </view>

CSS代码:

.follow-houses-view{
  width: 100%;
  margin: 20rpx 0 20rpx 0;
  height: 510rpx;
  /* background-color:  cornflowerblue; */
}
.follow-title{
  width: 100%;
  height: 50rpx;
  font-size: 30rpx;
  font-weight: 600;
  color: #fff;
  text-align:  center;
  line-height: 50rpx;
  background-color: #4B5B77 ;
}
.follow-houses{
  width: 100%;
  height: 450rpx;
  margin-top: 10rpx;
  background-color:  #E2DCE2;
  
}
.follow-scroll{
  width:355rpx;
  height: 450rpx;
  text-align: center;
  display:  inline-block;
  margin-left: 10rpx;
  margin-right: 10rpx;
  /* background-color:  hotpink; */
  overflow:hidden;
  font-size: 0;
}
.follow-info-top{
  width: 100%;
  height: 195rpx;
  margin-top: 30rpx;
  /* background-color:  cornflowerblue; */
}
.follow-info-img{
  width: 100%;
  height: 145rpx;
}
.follow-houses-info{
  width: 100%;
  height: 50rpx;
  white-space: nowrap;
  line-height: 50rpx;
  background-color:  #fff;
  position: relative;

}
.follow-name{
  width: 150rpx;
  font-size: 25rpx;
  display:  inline-block;
  height: 50rpx;
  overflow:hidden; 
  text-overflow:ellipsis;
  text-align:left;
}
.follow-position{
  width: 65rpx;
  height: 50rpx;
  font-size: 18rpx;
  display:  inline-block;
  overflow:hidden; 
  text-overflow:ellipsis;
  text-align:left;
  
}
.follow-show-icon{
  position:  absolute;
  top: 10rpx;
  right:80rpx;
  height: 30rpx;
  width: 30rpx;
  background-image:  url("https://cangsheng77.cn/csbz154155951220181107105807.png");
  background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;
  display: inline-block;
  
}
.follow-user-num{
  width: 70rpx;
  margin-left: 60rpx;
  font-size: 25rpx;
  display:  inline-block;
  overflow:hidden; 
  text-align:right;
}