Commit 8db45656 by 程智春

图片画廊图片样式

parent c8d609dc
...@@ -31,6 +31,8 @@ Component({ ...@@ -31,6 +31,8 @@ Component({
'value': 0 'value': 0
} }
], ],
imgArr : [],
lenI : 0
}, },
ready(){ ready(){
console.log(this.data.datas.componentData.paddingList,'this.data.datas.componentData.paddingList') console.log(this.data.datas.componentData.paddingList,'this.data.datas.componentData.paddingList')
...@@ -39,6 +41,14 @@ Component({ ...@@ -39,6 +41,14 @@ Component({
getPaddingList: this.data.datas.componentData.paddingList getPaddingList: this.data.datas.componentData.paddingList
}) })
} }
this.data.datas.componentData.imgList.forEach((item,index) => {
this.setData({
['imgArr[' + index + '].width'] : '',
['imgArr[' + index + '].height']: ''
})
})
}, },
/** /**
...@@ -48,6 +58,53 @@ Component({ ...@@ -48,6 +58,53 @@ Component({
itemClick(e){ itemClick(e){
let item = e.currentTarget.dataset.item let item = e.currentTarget.dataset.item
app.$themeToLink(item.link) app.$themeToLink(item.link)
},
bindload(e){
console.log(e,'宽高')
let index = e.currentTarget.dataset.index;
let width = e.detail.width
let height = e.detail.height
console.log(index,width,height)
this.setData({
lenI : this.data.lenI + 1
})
this.setData({
['imgArr[' + index + '].width']: width,
['imgArr[' + index + '].height']: height
})
if (this.data.lenI == this.data.datas.componentData.imgList.length){
let countWidth = 0;
this.data.imgArr.forEach(item => {
countWidth += Number(item.width)
})
console.log(countWidth,'countWidth')
const res = wx.getSystemInfoSync()
let b = countWidth / res.windowWidth
console.log(b,'nnnnn')
this.data.imgArr.forEach((it,ii) => {
this.setData({
['imgArr[' + ii + '].width']: it.width / b ,
['imgArr[' + ii + '].height']: it.height /b
})
})
}
} }
} }
}) })
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
</view> </view>
<view style="display:{{datas.componentData.style==='tiled' ? 'flex' : ''}}" class="ul"> <view style="display:{{datas.componentData.style==='tiled' ? 'flex' : ''}}" class="ul">
<view bindtap="itemClick" data-item="{{item}}" wx:for="{{datas.componentData.imgList}}" wx:key="{{index}}" style="margin-right:{{index===(datas.componentData.imgList.length-1)? '' : datas.componentData.imgPadding * 2 + 'rpx'}};width:{{datas.componentData.style==='across' ? datas.componentData.acrossPer+'%' : ''}}" class="li"> <view bindtap="itemClick" data-item="{{item}}" wx:for="{{datas.componentData.imgList}}" wx:key="{{index}}" style="margin-right:{{index===(datas.componentData.imgList.length-1)? '' : datas.componentData.imgPadding * 2 + 'rpx'}};width:{{datas.componentData.style==='across' ? datas.componentData.acrossPer+'%' : ''}}" class="li">
<image src="{{item.imageUrl}}" lazy-load mode="widthFix"></image> <image src="{{item.imageUrl}}" style="width:{{datas.componentData.style==='tiled' ? imgArr[index].width : ''}}px;height:{{ datas.componentData.style==='tiled' ? imgArr[index].height : ''}}px" lazy-load bindload="bindload" data-index="{{index}}" mode="{{datas.componentData.style==='across' ? 'widthFix' : ''}}"></image>
</view> </view>
</view> </view>
</view> </view>
......
...@@ -28,11 +28,11 @@ ...@@ -28,11 +28,11 @@
} }
.ul .li{ .ul .li{
display: inline-block; display: inline-block;
flex: 1 flex: 1;
} }
.ul .li image{ .ul .li image{
width: 100%;
vertical-align: middle; vertical-align: middle;
display: inline-block
} }
.prev-btn,.next-btn{ .prev-btn,.next-btn{
width: 60rpx; width: 60rpx;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment