微信小程序实现横向滚动块--scroll-view

2019独角兽企业重金招聘Python工程师标准>>>

一、微信小程序scroll-view 设置可滚动视图区域

1.由于手机的宽度比较窄，出现横向滚动的需要很常见

2.scrool-x ，设置区域可以横向滚动

3.scrool-into-view ,设置滚动到指定的id 处，在搜索页面加载时可以定位到选中项

二、使用横向滚动，样式设置重点

/*设置包裹*/

.out {
  background: #ddd;
  padding: 20px 10px;
  width: 100%;
  white-space: nowrap;
  box-sizing: border-box;
}

/*设置行内块*/

.out  .item {
  width: 100px;
  height: 80px;
  border: 1px solid red;
  background: white;
  display: inline-block;
  margin-right: 10px;
}

三、wxml代码如下

scrool-view 横向滚动示例


  
    
      1
    
    
      2
    
    
      3
    
    
      4
    
  

显示效果：

 

更多：

微信小程序实现纵向滚动块--scroll-view

微信小程序web-view使用整理

微信小程序图片上传使用整理（二）

微信小程序图片上传使用整理（一）

转载于:https://my.oschina.net/tianma3798/blog/1933517