父组件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() } })
swiper previous-margin设置不起作用previous-margin 设置无效,但next-margin有效果。如图: [图片] [图片]
2020-01-03