<template>
<view class="wrap">
<u-waterfall v-model="flowList" ref="uWaterfall">
<template v-slot:left="{leftList}">
<view class="demo-warter" v-for="(item, index) in leftList" :key="index">
<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
<view class="demo-title">
{{item.title}}
</view>
<view class="demo-tag">
<u-image shape="circle" width="60rpx" height="60rpx" :src="item.head" mode="aspectFill"
border-radius="20rpx"></u-image>
<view class="ath" >
{{item.ath}}
</view>
<view class="like-box" >
<img class="like" :src="item.isLike ? '/static/community/like.png' : '/static/community/redlike.png'" @click="toggleLike(item)" ></img>
</view>
</view>
</view>
</template>
<template v-slot:right="{rightList}">
<view class="demo-warter" v-for="(item, index) in rightList" :key="index">
<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
<view class="demo-title">
{{item.title}}
</view>
<view class="demo-tag">
<u-image shape="circle" width="60rpx" height="60rpx" :src="item.head" mode="aspectFill"
border-radius="20rpx"></u-image>
<view class="ath">
{{item.ath}}
</view>
<view class="like-box">
<img class="like" :src="item.isLike ? '/static/community/like.png' : '/static/community/redlike.png'" @click="toggleLike(item)"></img>
</view>
</view>
</view>
</template>
</u-waterfall>
<u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="addRandomData"></u-loadmore>
</view>
</template>
<script>
export default {
data() {
return {
loadStatus: 'loadmore',
flowList: [],
list: [{
title: '北国风光，千里冰封，万里雪飘',
ath: '新华时报',
head: '/static/head/1.png',
image: '/static/rednew/1.png',
isLike: false,
isStar: false,
},
{
title: '北国风光，千里冰封，万里雪飘',
ath: '新华时报',
head: '/static/head/1.png',
image: '/static/rednew/2.png',
isLike: false,
isStar: false,
},
{
title: '大河上下，顿失滔滔',
ath: '新华时报',
head: '/static/head/1.png',
image: '/static/rednew/3.png',
isLike: false,
isStar: false,
},
{
title: '欲与天公试比高',
ath: '新华时报',
head: '/static/head/1.png',
image: '/static/rednew/4.png',
isLike: false,
isStar: false,
},
]
}
},
onLoad() {
this.addRandomData();
},
onReachBottom() {
this.loadStatus = 'loading';
// 模拟数据加载
setTimeout(() => {
this.addRandomData();
this.loadStatus = 'loadmore';
}, 1000)
},
methods: {
toggleLike(item) {
this.$set(item, 'isLike',!item.isLike);
console.log("success")
},
toggleStar(item) {
this.$set(item, 'isStar', !item.isStar);
},
addRandomData(item) {
for (let i = 0; i < 10; i++) {
let index = this.$u.random(0, this.list.length - 1);
// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
let item = JSON.parse(JSON.stringify(this.list[index]))
item.id = this.$u.guid();
this.flowList.push(item);
}
},
}
}
</script>
<style>
/* page不能写带scope的style标签中，否则无效 */
page {
background-color: rgb(240, 240, 240);
}
</style>
<style lang="scss" scoped>
.demo-warter {
border-radius: 8px;
margin: 5px;
background-color: #ffffff;
padding: 8px;
position: relative;
}
.u-close {
position: absolute;
top: 32rpx;
right: 32rpx;
}
.demo-image {
width: 100%;
border-radius: 4px;
}
.demo-tag {
display: flex;
margin-top: 5px;
}
.demo-tag-owner {
background-color: $u-type-error;
color: #FFFFFF;
display: flex;
align-items: center;
padding: 4rpx 14rpx;
border-radius: 50rpx;
font-size: 20rpx;
line-height: 1;
}
.demo-title {
font-weight: bold;
}
.like {
width: 40rpx;
height: 40rpx;
}
.demo-price {
font-size: 30rpx;
color: $u-type-error;
margin-top: 5px;
}
.ath {
font-weight: bold;
font-size: 22rpx;
color: $u-tips-color;
margin-left: 10rpx;
margin-top: 13rpx;
}
</style>
为什么在小程序中不可以点赞更新图片但h5可以
有些方法微信和h5的支持不一样，可能在H5中生效不一定在微信中生效，用的时候看一下对端的兼容性
问题的标题是：小程序为什么不能实现点赞更新图片，而H5却可以？
在小程序中，无法直接通过点赞功能来实现更新图片的操作，而在H5页面中可以成功执行。这是因为小程序和H5的技术实现机制不同所致。
小程序是基于微信的轻应用框架，运行在微信客户端内部，并受到了严格的安全限制。小程序的功能和界面都是由微信客户端提供的框架来实现的，开发者只能通过提供小程序的代码和配置，让微信客户端进行渲染和展示。因此，小程序的能力受到了一定的限制，不能直接操作客户端的一些底层功能，例如更新图片。
与此不同，H5页面是在浏览器中运行的网页，可以通过浏览器提供的JavaScript API来操作DOM元素、更新图片等操作。H5页面具有更多的灵活性和自由度，可以实现更多定制化的功能。
如果想在小程序中实现点赞更新图片的功能，可以考虑以下解决方案：
点赞按钮事件：在小程序中，可以为点赞按钮绑定点击事件，当用户点击点赞按钮时，触发事件处理函数。
上传图片：在事件处理函数中，可以调用小程序的上传图片API，将用户选择的点赞图片上传到服务器。
更新图片：在服务器端接收到上传的图片后，可以根据业务逻辑进行图片处理和更新操作。可以使用服务器端的图像处理工具或库，例如OpenCV、PIL等，对图片进行编辑、合成等操作，并返回更新后的图片到小程序。
显示更新后的图片：在小程序中，可以通过图片组件或Canvas组件来展示服务器返回的更新后的图片。
需要注意的是，以上方案仅为一种可能的解决方案，具体的实现方式还需要根据具体业务需求和技术架构进行细化和定制。