您的位置：首页 > 移动开发 > 微信开发

微信小程序scroll-view做图片横向滚动

2018-09-12 16:57 609 查看 
 

  1.     <scroll-view class="image-group" scroll-x="true">

  2. <image src="../../images/background_image1@2x.png"></image>

  3. <image src="../../images/background_image1@2x.png"></image>

  4. <image src="../../images/background_image1@2x.png"></image>

  5. <image src="../../images/background_image1@2x.png"></image>

  6. <image src="../../images/background_image1@2x.png"></image>

  7. <image src="../../images/background_image1@2x.png"></image>

  8. </scroll-view>

 

  1. .image-group {

  2. display: flex;

  3. white-space: nowrap;

  4. margin-top: 30rpx;

  5. }

  6. .image-group image {

  7. display: inline-block;

  8. width: 375rpx;

  9. height: 180rpx;

  10. margin-right: 20rpx;

  11. }

关键点是五个：

1、scroll-view标签

2、scroll-x=“true”属性

3、使用display:flex 让图片横向排列

4、使用 white-space: nowrap，让图片不换行

5、图片设置inline-block

阅读更多
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航