广场动态样式问题优化

main
wangdong 6 months ago
parent 42ddd9b2bd
commit ae6da1d87e
  1. 7
      pages/index/index.vue
  2. 79
      pages/squareDynamic/index.vue

@ -665,7 +665,7 @@
})
}
this.list = [...arr];
if (data.select_mechant) {
if (data.select_mechant && uni.getStorageSync('storeVersion') == 1) {
this.gridList.splice(5, 1,
{
image: '/static/tabbar/shop-active.png',
@ -1068,7 +1068,9 @@
uni.setStorageSync('storeVersion', res.data.storeInfo.store_version || 0);
}
})
.finally(() => {})
.finally(() => {
this.queryWxAppSetting();
})
},
goJump(path) {
uni.navigateTo({
@ -1164,7 +1166,6 @@
this.getServeList();
this.queryBannerList();
this.getStore();
this.queryWxAppSetting();
this.getAuthorize();
},
onShow() {

@ -17,12 +17,12 @@
<view class="time">{{ item.update_time }}</view>
</view>
</view>
<view class="cont">
{{ showFullCont.includes(index) ? item.content : calcContentWidth(item.content).splitStr }}
<view v-if="!showFullCont.includes(index) && calcContentWidth(item.content).isSplit" class="show-more" @click="showFullCont.push(index)">全文</view>
<view class="cont" :class="[`cont${index}`, { 'close': item.contH > 120 && !showFullCont.includes(index)}]">
{{ item.content }}
</view>
<view v-if="item.contH > 120" class="show-more" @click="toggleFullCont(index)">{{ showFullCont.includes(index) ? '收起' : '全文' }}</view>
<view v-if="item.imgs && item.imgs.length > 0" class="pic-list">
<image v-for="(pic, k) in item.imgs" :key="k" :src="pic.external_url" mode="aspectFill" @click="previewImage(k, item.imgs)"></image>
<image v-for="(pic, k) in item.imgs" :key="k" :src="pic.external_url" mode="aspectFill" @click="previewImages(k, item.imgs)"></image>
</view>
<view v-if="item.goodsInfo" class="goods">
<view class="goods-box">
@ -108,6 +108,7 @@
edge: 20,
userInfo: {},
isLogin: false,
isPreview: false
};
},
watch: {
@ -139,6 +140,7 @@
}).exec();
},
onShow() {
if (!this.isPreview) {
this.loading = false;
this.finished = false;
this.page = 1;
@ -150,6 +152,9 @@
} else {
this.userInfo = {}
}
} else {
this.isPreview = false;
}
},
methods: {
//
@ -197,30 +202,42 @@
console.log(result);
const data = result.data.data;
this.dynamicList = this.dynamicList.concat(data);
this.$nextTick(() => {
if (this.dynamicList) {
this.dynamicList.forEach((item, index) => {
if (!item.contH) {
this.getHeight(item, index);
}
})
}
})
this.finished = data.length < this.limit;
this.loadTitle = this.finished ? "已全部加载完" : "上拉加载更多";
})
.finally(() => this.loading = false)
},
calcContentWidth(cont) {
let len = 0;
let spliti = 0;
for (var i = 0; i < cont.length; i++) {
const code = cont.charCodeAt(i);
if (cont.charCodeAt(i) > 255 || cont.charCodeAt(i) < 0) {
len += 17;
} else {
len += 10;
}
if (len > 710 && spliti === 0) {
spliti = i;
getHeight(item, index) {
console.log(item, index);
this.$nextTick(() => {
const query = uni.createSelectorQuery().in(this);
query.select(`.cont${index}`).boundingClientRect(data => {
console.log(data);
if (data) {
// data.height
console.log('元素高度:', data.height);
item.contH = data.height;
}
}).exec();
})
},
toggleFullCont(index) {
if (this.showFullCont.includes(index)) {
const idx = this.showFullCont.findIndex(v => v == index);
console.log(idx);
this.showFullCont.splice(idx, 1);
} else {
this.showFullCont.push(index);
}
console.log(cont, cont.length, spliti, len);
return {
isSplit: len > 748,
splitStr: len > 710 ? `${cont.split('').splice(0, spliti).join('')}...` : cont,
};
},
clipCont(cont) {
uni.setClipboardData({
@ -348,7 +365,7 @@
this.isMove = false;
},
previewImage(idx, images) {
previewImages(idx, images) {
console.log(idx, images);
const arr = [];
images.forEach(v => {
@ -358,6 +375,7 @@
current: idx,
urls: arr,
})
this.isPreview = true;
},
toGoodsDetail(item) {
this.$navTo('pages/goods/detail', {
@ -453,12 +471,21 @@
position: relative;
color: #222222;
word-break: break-word;
white-space: pre-line;
&.close {
max-height: 240rpx;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 6;
-webkit-box-orient: vertical;
}
}
.show-more {
position: absolute;
right: 10rpx;
bottom: 0;
font-size: 28rpx;
line-height: 40rpx;
color: #F34A40;
}
text-align: right;
}
.pic-list {
margin-top: 24rpx;

Loading…
Cancel
Save