收藏
回答

swiper previous-margin设置不起作用

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 需求 swiper 工具 7.0.3 2.4.0


previous-margin 设置无效,但next-margin有效果。如图:





回答关注问题邀请回答
收藏

3 个回答

  • 社区技术运营专员-灵芝
    社区技术运营专员-灵芝
    2019-03-06

    你好,这边测试是正常的,请提供能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html

    2019-03-06
    有用
    回复 6
    查看更多(1)
  • Vision_X
    Vision_X
    03-26

    swiper-item不要设置width


    03-26
    有用
    回复
  • 小张总
    小张总
    01-03

    父组件wxml

    <view class"subBanner">

    bannerprevious-margin"30rpx"next-margin"{{nextMargin}}"autoplay"{{true}}"></banner

    </view


    父组件js

    const app = getApp()

    Page({

    data: {

    url: http.url, // url初始化

    imgUrls: [], // 轮播图路径

    perviousMargin: '30rpx', // 轮播图当前个距离左边的距离

    nextMargin: '30rpx', // 轮播图当前个距离右边的距离

    indicatorDots: false, // 轮播图去掉默认项目导航

    subCurrentIndex: // 轮播图当前个下标

    },

    })


    子组件wxml

    viewclass"banner">

    swiperindicator-dots"{{true}}"autoplay"{{false}}"interval"{{false}}"duration"300"current"0"circular"true"previous-margin"{{perviousMargin}}"next-margin"{{nextMargin}}">

    blockwx:for"{{imgUrls}}"wx:key"banner">

    swiper-item

    imagesrc"{{url+item.previewUrl}}"class"slide-image"></image

    </swiper-item

    </block

    </swiper

    </view>

    子组件js

    const http = require('../../utils/http'

    Component({

    options:{

    multipleSlots: true, // 在组件使用插槽slot并支持多个插槽

    addGlobalClass: true// 组件的样式可以在全局进行修改

    },

    /*组件的属性列表*/

    properties:{

    indicatorDots:{

    type:Boolean

    value:true

    },

    autoplay:{

    type:Boolean

    value:false

    },

    currentIndex:{

    type:Number

    value:

    },

    imgUrls:{

    type:Array

    value:[]

    },

    circular:{

    type:Boolean

    value:false

    },

    perviousMargin:{

    type:String

    value:'0'

    },

    nextMargin:{

    type:String

    value:'0'

    },

    url:{

    type:String

    value:http.url

    },

    interval:{

    type:Number

    value:300

    },

    duration:{

    type:Number

    value:500

    }

    },

    methods:{

    getSubBannerURL: function () {

    http.get({

    url: 'webapp/websiteImages'

    success: res => {

    this.setData({

    imgUrls: res.data.entity.type_1

    })

    this.triggerEvent('setSubImgUrl', {

    imgUrls: res.data.entity.type_1

    })

    }

    })

    },

    },

    /*

    组件生命周期函数,在组件实例进入页面节点树时执行

    attached只执行与一次 不会重新渲染

    */

    attached: function () {

    this.getSubBannerURL()

    }

    })






    01-03
    有用
    回复
登录 后发表内容