小程序滑动

最新推荐文章于 2024-07-09 22:53:52 发布

Hom_mi

最新推荐文章于 2024-07-09 22:53:52 发布

阅读量125

点赞数

本文链接：https://blog.csdn.net/qq_38921534/article/details/85710731

版权

<view class="plat_list">
  <scroll-view scroll-x="true" class="scroll_s" >
        <block wx:for="{{array}}" wx:key="{{index}}" wx:for-item="item">
          <view class="one">
          <!-- <navigator url="/pages/list_details/list_details"> -->
            <view class="one_img">
              <image class="one_image" src="{{item.pic}}" style=""></image>
            </view>
            <view class="one_v">
             <p class="one_p">{{item.title}}</p>
            </view>
           <!-- </navigator> -->
          </view>
        </block>
  </scroll-view>
</view>

array:[{
        pic:'../lvyou_play/images/test.jpg',
        title:'滩涂摄影基地'
    },
    {  
        pic:'../lvyou_play/images/test.jpg',
        title:'篝火排队'
    },
    {  
        pic:'../lvyou_play/images/test.jpg',
        title:'沙滩排球'
      },
   {
        pic: '../lvyou_play/images/test.jpg',
        title:'日出'
      }
    
    ]

.plat_list{
  
  height:365rpx;
  width:95%;
  box-sizing: border-box;
  border:0rpx solid black;
  margin:0 auto;

}
.scroll_s{
  width: 100%; white-space: nowrap;height:100%;box-sizing: border-box;overflow: hidden;
}
.one_img{
  display: block;
  height:300rpx;
  border-radius: 6rpx;
  overflow: hidden;
  padding:8rpx;
  position:relative;
} 
.one{
display: inline-block; width: 33%; height:100%; background: ;
padding-left:25rpx;
}
.one_img img{
  border-radius: 10rpx;
}
.one_v{

  width:90%;
  padding-left:15rpx;
}