微信小程序--横向滚动

最新推荐文章于 2024-05-26 09:15:42 发布

原创最新推荐文章于 2024-05-26 09:15:42 发布 · 271 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #横向滚动

微信小程序专栏收录该内容

24 篇文章

订阅专栏

效果图

wxml代码
scroll-view可滚动视图区域。 scroll-x=“true” 允许横向滚动

<view class='container'>
  <scroll-view class="image-group" scroll-x="true">
    <view class="img-box">
      <image src="../images/1.png"></image>
      <text class='elli1'>白沙门公园</text>
      <span>￥88</span>
      <span>  /每成人</span>
    </view>
    <view class="img-box">
      <image src="../images/1.png"></image>
      <text class='elli1'>白沙门公园</text>
      <span>￥88</span>
      <span>  /每成人</span>
    </view>
    <view class="img-box">
      <image src="../images/1.png"></image>
      <text class='elli1'>白沙门公园白沙门公园白沙门公园</text>
      <span>￥88</span>
      <span>  /每成人</span>
    </view>
    <view class="img-box">
      <image src="../images/1.png"></image>
      <text class='elli1'>白沙门公园</text>
      <span>￥88</span>
      <span>  /每成人</span>
    </view>
  </scroll-view>
</view>

wxss代码

.image-group{
  display: flex;
  white-space: nowrap;
  margin-top: 30rpx;
}
.image-group .img-box{
  width: 250rpx;
  display: inline-block;
  margin-right: 20rpx;
}
.img-box image{
  width: 250rpx;
  height: 180rpx;
  border: 2rpx solid #e9e8e8;
  box-sizing: border-box;
  padding: 6rpx;
}
.img-box text{
  font-size: 26rpx;
}
.img-box span{
  display: inline;
}
.img-box span:first-of-type{
  color: #d11515;
  font-size: 30rpx;
}
.img-box span:last-child{
  font-size: 22rpx;
  color: #868686;
}