小程序纵向轮播显示3列每次滚动一个效果

时间：2020-07-06 18:43:52 阅读：111 评论：0 收藏：0 [点我收藏+]

wxml

<swiper-item>

<view class="swiper_item">{{item.title}}</view>

</swiper-item>

</block>

</swiper>

</view>

wxss

.swiper-view{

display: flex;

flex-direction: row;

justify-content: center;

align-items: center;

border-radius: 5rpx;

background: tomato

}

.swiper_container {

height: 300rpx;

width: 90%;

}

.swiper_item {

height: 50rpx;

width: 90%;

font-size: 26rpx;

white-space: nowrap;

display: flex;

flex-direction: row;

justify-content: center;

align-items: center;

color: white

}

Page({
  data: {
     msgList: [
      { title: "朋友圈" },
      { title: "文章" },
      { title: "公共号" },
      { title: "小程序" },
      { title: "音乐" },
      { title: "表情" },
      { title: "订阅号" }
   ]
 }
})

技术分享图片

小程序纵向轮播显示3列每次滚动一个效果

原文：https://www.cnblogs.com/yaoling/p/13256219.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)

小程序 纵向轮播 显示3列 每次滚动一个效果

小程序纵向轮播显示3列每次滚动一个效果