当前位置：首页 > 微信 > 正文

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

wxml

<view class="swiper-view">
 <swiper next-margin="100rpx"  previous-margin="100rpx" class="swiper_container" vertical="true" autoplay="true" circular="true" interval="2000">
  <block wx:for="{{msgList}}">
   <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
 }

js

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

技术图片

 

上一篇
解决在微信网页中百度地图定位不准确的问题

下一篇
微信小程序，当字数不确定时的右移

相关文章

最新文章