酒店图片页，瀑布流

pages.json

@@ -722,6 +722,8 @@
 				"path": "list"
 			},{
 				"path": "components/time/index"
+			},{
+				"path": "picture"
 			},{
 				"path": "detail",
 				"enablePullDownRefresh": true,

pages/hotel/components/waterfalls-flow.vue

+<template>
+  <view class="waterfalls-box" :style="{ height: height + 'px' }">
+    <!--  #ifdef  MP-WEIXIN -->
+    <view
+      v-for="(item, index) of list"
+      class="waterfalls-list"
+      :key="item[idKey]"
+      :id="'waterfalls-list-id-' + item[idKey]"
+      :ref="'waterfalls-list-id-' + item[idKey]"
+      :style="{
+        '--offset': offset + 'px',
+        '--cols': cols,
+        top: allPositionArr[index].top || 0,
+        left: allPositionArr[index].left || 0,
+      }"
+      @click="$emit('wapper-lick', item)"
+    >
+      <image
+        class="waterfalls-list-image"
+        mode="widthFix"
+        :class="{ single }"
+        :style="imageStyle"
+        :src="item[imageSrcKey] || ' '"
+        @load="imageLoadHandle(index)"
+        @error="imageLoadHandle(index)"
+        @click="$emit('image-click', item)"
+      />
+      <slot name="slot{{index}}" />
+    </view>
+    <!--  #endif -->
+
+    <!--  #ifndef  MP-WEIXIN -->
+    <view
+      v-for="(item, index) of list"
+      class="waterfalls-list"
+      :key="item[idKey]"
+      :id="'waterfalls-list-id-' + item[idKey]"
+      :ref="'waterfalls-list-id-' + item[idKey]"
+      :style="{
+        '--offset': offset + 'px',
+        '--cols': cols,
+        ...listStyle,
+        ...(allPositionArr[index] || {}),
+      }"
+      @click="$emit('wapper-lick', item)"
+    >
+      <image
+        class="waterfalls-list-image"
+        :class="{ single }"
+        mode="widthFix"
+        :style="imageStyle"
+        :src="item[imageSrcKey] || ' '"
+        @load="imageLoadHandle(index)"
+        @error="imageLoadHandle(index)"
+        @click="$emit('image-click', item)"
+      />
+      <slot v-bind="item" />
+    </view>
+    <!--  #endif -->
+  </view>
+</template>
+<script>
+export default {
+  props: {
+    list: { type: Array, required: true },
+    // offset 间距，单位为 px
+    offset: { type: Number, default: 10 },
+    // 列表渲染的 key 的键名，值必须唯一，默认为 id
+    idKey: { type: String, default: "id" },
+    // 图片 src 的键名
+    imageSrcKey: { type: String, default: "image_url" },
+    // 列数
+    cols: { type: Number, default: 2, validator: (num) => num >= 2 },
+    imageStyle: { type: Object },
+
+    // 是否是单独的渲染图片的样子，只控制图片圆角而已
+    single: { type: Boolean, default: false },
+
+    // #ifndef MP-WEIXIN
+    listStyle: { type: Object },
+    // #endif
+  },
+  data() {
+    return {
+      topArr: [], // left, right 多个时依次表示第几列的数据
+      allPositionArr: [], // 保存所有的位置信息
+      allHeightArr: [], // 保存所有的 height 信息
+      height: 0, // 外层包裹高度
+      oldNum: 0,
+      num: 0,
+    };
+  },
+  created() {
+    this.refresh();
+  },
+  methods: {
+    imageLoadHandle(index) {
+      const id = "waterfalls-list-id-" + this.list[index][this.idKey],
+        query = uni.createSelectorQuery().in(this);
+      query
+        .select("#" + id)
+        .fields({ size: true }, (data) => {
+          this.num++;
+          this.$set(this.allHeightArr, index, data.height);
+          if (this.num === this.list.length) {
+            for (let i = this.oldNum; i < this.num; i++) {
+              const getTopArrMsg = () => {
+                let arrtmp = [...this.topArr].sort((a, b) => a - b);
+                return {
+                  shorterIndex: this.topArr.indexOf(arrtmp[0]),
+                  shorterValue: arrtmp[0],
+                  longerIndex: this.topArr.indexOf(arrtmp[this.cols - 1]),
+                  longerValue: arrtmp[this.cols - 1],
+                };
+              };
+
+              const { shorterIndex, shorterValue } = getTopArrMsg();
+              const position = {
+                top: shorterValue + "px",
+                left: (data.width + this.offset) * shorterIndex + "px",
+              };
+              this.$set(this.allPositionArr, i, position);
+              this.topArr[shorterIndex] =
+                shorterValue + this.allHeightArr[i] + this.offset;
+              this.height = getTopArrMsg().longerValue - this.offset;
+            }
+            this.oldNum = this.num;
+            // 完成渲染 emit `image-load` 事件
+            this.$emit("image-load");
+          }
+        })
+        .exec();
+    },
+    refresh() {
+      let arr = [];
+      for (let i = 0; i < this.cols; i++) {
+        arr.push(0);
+      }
+      this.topArr = arr;
+      this.num = 0;
+      this.oldNum = 0;
+      this.height = 0;
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+// 这里可以自行配置
+$border-radius: 6px;
+
+.waterfalls-box {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  .waterfalls-list {
+    width: calc((100% - var(--offset) * (var(--cols) - 1)) / var(--cols));
+    position: absolute;
+    background-color: #fff;
+    border-radius: $border-radius;
+    // 防止刚开始渲染时堆叠在第一幅图的地方
+    left: calc(-50% - var(--offset));
+    .waterfalls-list-image {
+      width: 100%;
+      will-change: transform;
+      border-radius: $border-radius $border-radius 0 0;
+      display: block;
+      &.single {
+        border-radius: $border-radius;
+      }
+    }
+  }
+}
+</style>

pages/hotel/detail.vue

@@ -24,7 +24,7 @@
 				<view class="media-info">
 					<view class="flex">
 						<view class="mi-left">
-							<view v-if="imgsList.length>0" class="type-img-box">
+							<view v-if="imgsList.length>0" class="type-img-box" @click="openPicture">
 								<image :src="imgsList[0].picUrl" mode="aspectFill"></image>
 								<view class="content">
 									<!-- <u-icon name="photo" size="26" color="#FFF"></u-icon> -->
@@ -329,6 +329,11 @@
 			this.mainColor = this.$uiConfig.mainColor;
 		},
 		methods: {
+			openPicture(){
+				uni.navigateTo({
+					url:"/pages/hotel/picture"
+				})
+			},
 			chosenDateResult(obj) {
 				obj.startDay = this.formatMonthDay(obj.startDay)
 				obj.endDay = this.formatMonthDay(obj.endDay)

pages/hotel/picture.vue

+<template>
+	<view>
+		<scroll-view scroll-y="true" class="hotel-pic">
+			<view class="content">
+				<view class="left">
+					<view v-for="(x,i) in jiList" :key="i" class="image-box">
+						<image :src="x.picUrl" mode="widthFix"></image>
+					</view>
+				</view>
+				<view class="right">
+					<view v-for="(x,i) in ouList" :key="i" class="image-box">
+						<image :src="x.picUrl" mode="widthFix"></image>
+					</view>
+				</view>
+			</view>
+		</scroll-view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				imageList:[
+					{
+						picUrl:"https://ak-d.tripcdn.com/images/200j13000000v60wjE77D_R_1080_808_R5_D.jpg",
+						type:"酒店"
+					},
+					{
+						picUrl:"https://ak-d.tripcdn.com/images/t1/hotel/533000/532930/3fcc6398b3c44c08bb1b57aef579793e_R_1080_808_R5_D.jpg",
+						type:"酒店"
+					},
+					{
+						picUrl:"https://ak-d.tripcdn.com/images/20010r000000hmqk32EF2_R_1080_808_R5_D.jpg",
+						type:"酒店"
+					},
+					{
+						picUrl:"https://ak-d.tripcdn.com/images/200v0f0000007d6wgBCD6_R_1080_808_R5_D.jpg",
+						type:"酒店"
+					},
+					{
+						picUrl:"http://imgfile.oytour.com/Upload/DMC/202105251114114560000000058.png",
+						type:"酒店"
+					},
+					{
+						picUrl:"https://dimg07.c-ctrip.com/images/01066120008jk5bcc94AC_C_1600_1200.jpg",
+						type:"酒店"
+					}
+				],
+				jiList:[],
+				ouList:[]
+			}
+		},
+		created() {
+			uni.setNavigationBarTitle({
+				title: "酒店图片",
+			});
+			this.imageList.forEach((x,i)=>{
+				if(i%2==0){
+					this.jiList.push(x)
+				}else{
+					this.ouList.push(x)
+				}
+			})
+			console.log(this.jiList,this.ouList)
+		},
+		mounted () {
+			
+		}
+	}
+</script>
+
+<style>
+	.hotel-pic{
+		height: 100vh;
+		width: 100vw;
+	}
+	.hotel-pic .content{
+		display: flex;
+		align-items: flex-start;
+		padding: 44rpx;
+		padding-top: 14rpx;
+	}
+	.hotel-pic .content .left{
+		flex:1;
+		margin-right: 15rpx;
+	}
+	.hotel-pic .content .right{
+		flex:1;
+		margin-left: 15rpx;
+	}
+	.hotel-pic .content .image-box{
+		width:100%;
+		margin-top: 30rpx;
+	}
+	.hotel-pic .content .image-box image{
+		width: 100%;
+		border-radius: 20rpx;
+	}
+</style>