Commit 8db45656 by 程智春

图片画廊图片样式

parent c8d609dc
......@@ -31,6 +31,8 @@ Component({
'value': 0
}
],
imgArr : [],
lenI : 0
},
ready(){
console.log(this.data.datas.componentData.paddingList,'this.data.datas.componentData.paddingList')
......@@ -39,6 +41,14 @@ Component({
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({
itemClick(e){
let item = e.currentTarget.dataset.item
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 @@
</view>
<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">
<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>
......
......@@ -28,11 +28,11 @@
}
.ul .li{
display: inline-block;
flex: 1
flex: 1;
}
.ul .li image{
width: 100%;
vertical-align: middle;
display: inline-block
}
.prev-btn,.next-btn{
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