98 lines
2.3 KiB
JavaScript
98 lines
2.3 KiB
JavaScript
"use strict";
|
|
const common_vendor = require("../../common/vendor.js");
|
|
const _sfc_main = {
|
|
name: "image-grid-enhanced",
|
|
props: {
|
|
// 视频数据列表
|
|
imageList: {
|
|
type: Array,
|
|
required: true,
|
|
default: () => []
|
|
},
|
|
// 每行列数
|
|
columns: {
|
|
type: Number,
|
|
default: 2
|
|
},
|
|
// 间距
|
|
gap: {
|
|
type: String,
|
|
default: "10px"
|
|
},
|
|
// 容器高度
|
|
height: {
|
|
type: String,
|
|
default: "100vh"
|
|
},
|
|
// 背景颜色
|
|
backgroundColor: {
|
|
type: String,
|
|
default: "#FFFFFF"
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
scrollTop: 0
|
|
// 当前滚动位置
|
|
};
|
|
},
|
|
computed: {
|
|
gridStyle() {
|
|
return {
|
|
display: "grid",
|
|
gridTemplateColumns: `repeat(${this.columns}, 1fr)`,
|
|
gap: this.gap,
|
|
padding: "10px",
|
|
backgroundColor: this.backgroundColor
|
|
};
|
|
},
|
|
itemStyle() {
|
|
const aspectRatio = 0.75;
|
|
return {
|
|
position: "relative",
|
|
overflow: "hidden",
|
|
borderRadius: "8px",
|
|
backgroundColor: this.backgroundColor,
|
|
aspectRatio
|
|
};
|
|
}
|
|
},
|
|
mounted() {
|
|
},
|
|
methods: {
|
|
// 视频点击事件 - 通过蒙版层触发
|
|
onImageClick(item) {
|
|
console.log("拦截事件", item);
|
|
this.$emit("image-click", item);
|
|
},
|
|
// 滚动事件处理
|
|
onScroll(e) {
|
|
this.scrollTop = e.detail.scrollTop;
|
|
this.$emit("scroll", e);
|
|
},
|
|
// 滚动到底部加载更多事件
|
|
loadMoreAction() {
|
|
this.$emit("load-more-action");
|
|
}
|
|
}
|
|
};
|
|
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
return {
|
|
a: common_vendor.f($props.imageList, (item, index, i0) => {
|
|
return {
|
|
a: item.src,
|
|
b: common_vendor.o(($event) => $options.onImageClick(item), index),
|
|
c: index
|
|
};
|
|
}),
|
|
b: common_vendor.s($options.itemStyle),
|
|
c: common_vendor.s($options.gridStyle),
|
|
d: $props.height,
|
|
e: $props.backgroundColor,
|
|
f: common_vendor.o((...args) => $options.onScroll && $options.onScroll(...args)),
|
|
g: common_vendor.o((...args) => $options.loadMoreAction && $options.loadMoreAction(...args))
|
|
};
|
|
}
|
|
const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-21f9c3fa"]]);
|
|
wx.createComponent(Component);
|