请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册
搜索

互动交流 快应用轮播怎么做这种样式?

13
回复
96
查看
[复制链接]

2

主题

11

帖子

65

积分

 楼主| 4 天前 显示全部楼层 |阅读模式
看文档里的swiper,属性很少
101565752095_.pic.jpg
回复

使用道具 举报

2

主题

11

帖子

65

积分

 楼主| 4 天前 显示全部楼层
求解求解
回复

使用道具 举报

2

主题

11

帖子

65

积分

 楼主| 4 天前 显示全部楼层
真的没人吗。。
回复

使用道具 举报

0

主题

2

帖子

10

积分

3 天前 显示全部楼层
你现在的轮播是怎么实现的呢?
回复

使用道具 举报

2

主题

11

帖子

65

积分

 楼主| 3 天前 显示全部楼层
whuhenry 发表于 2019-8-15 14:35
你现在的轮播是怎么实现的呢?

用的官方文档里的swiper组件,但是只支持九种属性,用上里面的nextmargin和previousmargin只能做到现在这样file:///Users/zhangjing/Desktop/131565852554_.pic_hd.jpg
回复

使用道具 举报

2

主题

11

帖子

65

积分

 楼主| 3 天前 显示全部楼层
希染丶 发表于 2019-8-15 15:05
用的官方文档里的swiper组件,但是只支持九种属性,用上里面的nextmargin和previousmargin只能做到现在这 ...

就这样
131565852554_.pic_hd.jpg
回复

使用道具 举报

2

主题

11

帖子

65

积分

 楼主| 3 天前 显示全部楼层
希染丶 发表于 2019-8-15 15:05
用的官方文档里的swiper组件,但是只支持九种属性,用上里面的nextmargin和previousmargin只能做到现在这 ...
这是代码
<div class="swiper-container">
      <swiper class="swiper" autoplay="{{autoPlay}}" onchange='swiperChange' interval="{{sliderValue}}"
        centeredSlides="true" indicator="false" slidesPerview="3" duration="{{durationValue}}" vertical="{{isVertical}}"
        previousmargin="25%" nextmargin="25%" loop="{{loopPlay}}" style="indicatorTop: {{topValue}}">
        <image src="../image/xingzuo/co_0.webp"></image>
        <image src="../image/xingzuo/co_1.webp"></image>
        <image src="../image/xingzuo/co_2.webp"></image>
        <image src="../image/xingzuo/co_3.webp"></image>
        <image src="../image/xingzuo/co_4.webp"></image>
        <image src="../image/xingzuo/co_5.webp"></image>
        <image src="../image/xingzuo/co_6.webp"></image>
        <image src="../image/xingzuo/co_7.webp"></image>
        <image src="../image/xingzuo/co_8.webp"></image>
        <image src="../image/xingzuo/co_9.webp"></image>
        <image src="../image/xingzuo/co_10.webp"></image>
        <image src="../image/xingzuo/co_11.webp"></image>
      </swiper>
    </div>
回复

使用道具 举报

0

主题

5

帖子

25

积分

3 天前 显示全部楼层
我觉得现有体系 实现不了 只有swiper和list能实现页面内滑动  你可以试试手写css(如果支持的话)
回复

使用道具 举报

2

主题

11

帖子

65

积分

 楼主| 3 天前 显示全部楼层
AnsenJ 发表于 2019-8-15 17:29
我觉得现有体系 实现不了 只有swiper和list能实现页面内滑动  你可以试试手写css(如果支持的话) ...

好吧
回复

使用道具 举报

6

主题

31

帖子

185

积分

3 天前 显示全部楼层
楼主尝试使用这种思路试试:
①、每个项是一个div,div内有一张图片,div样式class为banner-normal。
②、每次轮播图change时,获得当前index。
③、每个div有一个自己的banner-index,当banner-index等于当前活跃index时,添加class:banner-active。
④、banner-active内部的图片样式区别于其他项,比如图片宽高、左右偏移。

简单来说,就是div都是一样的,div内部图片样式根据activeIndex变化,甚至上一张下一张,上上张下下张样式都可不同。

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册