赞
踩
- <template>
- <view class="container">
- <view class="left" ref="leftColumn">
- <view class="posive" v-for="(item, index) in leftList" :key="index">
- <image :src="item.src" alt="" mode="widthFix" @click="previewImg(item)" />
- </view>
- </view>
- <view class="right" ref="rightColumn">
- <view class="posive" v-for="(item, index) in rightList" :key="index">
- <image :src="item.src" alt="" mode="widthFix" @click="previewImg(item)" />
- </view>
- </view>
- </view>
- </template>
-
- <script>
- export default {
- data() {
- return {
- // 图片列表
- list: [{
- src: "https://inews.gtimg.com/om_bt/OjPq2cnMN_-ivDKjxpCZ2kk_ab8YC5VMnL-0pQ21fUvd4AA/1000"
- },
- {
- src: "https://inews.gtimg.com/om_bt/OjPq2cnMN_-ivDKjxpCZ2kk_ab8YC5VMnL-0pQ21fUvd4AA/1000"
- },
- {
- src: "https://inews.gtimg.com/om_bt/OjPq2cnMN_-ivDKjxpCZ2kk_ab8YC5VMnL-0pQ21fUvd4AA/1000"
- },
- {
- src: "https://inews.gtimg.com/om_bt/OjPq2cnMN_-ivDKjxpCZ2kk_ab8YC5VMnL-0pQ21fUvd4AA/1000"
- },
- {
- src: "https://inews.gtimg.com/om_bt/OjPq2cnMN_-ivDKjxpCZ2kk_ab8YC5VMnL-0pQ21fUvd4AA/1000"
- },
- {
- src: "https://inews.gtimg.com/om_bt/OjPq2cnMN_-ivDKjxpCZ2kk_ab8YC5VMnL-0pQ21fUvd4AA/1000"
- },
- {
- src: "https://inews.gtimg.com/om_bt/OjPq2cnMN_-ivDKjxpCZ2kk_ab8YC5VMnL-0pQ21fUvd4AA/1000"
- },
- {
- src: "https://inews.gtimg.com/om_bt/OjPq2cnMN_-ivDKjxpCZ2kk_ab8YC5VMnL-0pQ21fUvd4AA/1000"
- },
- {
- src: "https://inews.gtimg.com/om_bt/OjPq2cnMN_-ivDKjxpCZ2kk_ab8YC5VMnL-0pQ21fUvd4AA/1000"
- },
- {
- src: "https://inews.gtimg.com/om_bt/OjPq2cnMN_-ivDKjxpCZ2kk_ab8YC5VMnL-0pQ21fUvd4AA/1000"
- },
-
-
-
- // 添加更多图片对象
- ],
- // 初始化左右盒子
- leftList: [],
- rightList: [],
- // 初始化左右盒子高度
- leftH: 0,
- rightH: 0
- };
- },
- onLoad() {
- this.doList();
- },
- methods: {
- doList() {
- const that = this;
- this.list.forEach(res => {
- uni.getImageInfo({
- src: res.src,
- success: image => {
- let showH = (50 * image.height) / image.width;
- if (that.leftH <= that.rightH) {
- that.leftList.push({
- ...res,
- height: showH
- });
- that.leftH += showH;
- } else {
- that.rightList.push({
- ...res,
- height: showH
- });
- that.rightH += showH;
- }
- }
- });
- });
- }
- }
- };
- </script>
-
- <style>
- .container {
- padding: 0 24rpx;
- font-size: 14rpx;
- line-height: 24rpx;
- display: flex;
- justify-content: space-between;
-
- .right,
- .left {
- display: inline-block;
- width: 340rpx;
- vertical-align: top;
- }
-
- .left image,
- .right image {
- border-radius: 16rpx;
- width: 100%;
- margin-bottom: 24rpx;
- }
- }
- </style>
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。