微信小程序 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

    最新信息
    
      
          

            
              
               
                楼盘
               长宁区 
                    
                200 
              
            
            
            
              
               
                楼盘
               长宁区 
                    
                200 
              
            
          
      
    
  

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;
}