公告列表
公告列表
收藏
回答

swiper 组件竖向轮播滚动失效

swiper 组件竖向轮播滚动失效，是否跟swiper-item里的组件多少有关?


想实现一个定时向上滚动的效果，于是乎想到了swiper, 然后设置swiper的vertical属性为true, 依次设置其它属性，但是尝试多次后并没有实现轮播滚动的效果


代码示例如下:

<swpier class="swiper__content" indicator-dots="true" vertical="true" circular="true" autoplay="true" interval="2000">
   <block wx:for="{{swiperArr}}" wx:key="index" wx:for-item="swiperItem">
     <swpier-item class="swiper__item" animation="{{animationData}}">
       <view class="swiper__avatar">
         <image src="{{swiperItem.avatarUrl}}" class="swiper__avatar--img" lazyload>image>
       view>
       <view class="swiper__nickname">
         <text>{{swiperItem.nickname}}text>
       view>
       <view class="swiper__progress">
         <view class="progress_desc">
           <text>还差text>
           <text class="progress_desc--color">1人text>
           <text>拼成text>
         view>
         <view class="progress_time">
           <text>剩余17:43:00text>
         view>
       view>
       <view class="swiper__join">
         <text>去参团text>
       view>
     swpier-item>
   block>
 swpier>


.swiper__content {
 width: 100%;
 height: 240rpx;
 overflow: hidden;
}
.swiper__item {
 width: 100%;
 box-sizing: border-box;
 height: 120rpx;
 display: flex;
 justify-content: space-between;
 align-items: center;
 border-top: 1px solid #eee;
}
.swiper__avatar {
 width: 64rpx;
 height: 64rpx;
}
.swiper__avatar--img {
 width: 100%;
 height: 100%;
 border-radius: 50%;
}
.swiper__nickname {
 flex: 1;
 margin-left: 20rpx;
 font-size: 14px;
}
.swiper__progress {
 width: 200rpx;
}
.progress_desc {
 font-size: 14px;
}
.progress_desc--color {
 color: #EB4A52;
}
.progress_time {
 font-size: 12px;
}
.swiper__join {
 width: 120rpx;
 height: 60rpx;
 line-height: 60rpx;
 text-align: center;
 font-size: 14px;
 color: #fff;
 background-color: #EB4A52;
 border-radius: 10rpx;
}


然后再就是如果单独抽出来做成一个自定义组件设置swiper组件的样式会失效（比如高度），得在swiper外边加一个view再设置高度或其他样式才可以，封装为自定义组件后组件里包含的swiper样式失效，但是swiper-item样式正常


不过现在是无论是否单独封装成组件还是直接在wxml中，swiper组件设置vertical属性失效，不会出现任何上下轮播滚动的效果


不知道是什么情况，请大神帮忙看下到底是哪里出错了??

最后一次编辑于  2017-12-12
回答关注问题邀请回答
收藏

5 个回答

  • LastLeaf
    LastLeaf
    2017-12-19

    这样说也很有道理。

    2017-12-19
    有用
    回复
  • LastLeaf
    LastLeaf
    2017-12-13

    你好，我试了下，看起来 vertical circular 等属性都没看到有什么异常。请问具体是什么问题呢？

    2017-12-13
    有用
    回复
  • Sunsky
    Sunsky
    2017-12-19

    sorry，是我的问题，你说的这些属性的书写格式应该都可以，关键的是我的swiper标签名写错了，我也是排查了半天发现了这个问题，是swiper而不是swpier,这才是导致滚动失效的真正原因

    2017-12-19
    有用
    回复
  • 2017-12-19

    如果按照这样规范写的话


    如果设置为false是不是应该

    <swpier class="swiper__content" indicator-dots="false" vertical="false" circular="false" autoplay="false" interval="2000">

    这个写法不是认为字符串的吗 永true

    我觉得应该这样写

    <swpier class="swiper__content" indicator-dots vertical circular autoplay interval="2000">

    或者

    <swpier class="swiper__content" indicator-dots='{{false}}' vertical='{{false}}' circular='{{false}}' autoplay='{{false}}' interval="2000">

    这样是不是更规范


    2017-12-19
    有用
    回复
  • 2017-12-19
    <swpier class="swiper__content" indicator-dots="true" vertical="true" circular="true" autoplay="true" interval="2000">


    改成

    <swpier class="swiper__content" indicator-dots vertical circular autoplay interval="2000">


    试试

    2017-12-19
    有用
    回复
请 登录 后发表内容
相关问题
相关文档