========================wxml======================
<view class="comShare-all" id=‘britney‘ style=‘pointer-events:{{pointerEvents}}‘> <view class="comShare-list-left"> <block wx:for="{{listData}}" wx:key="index"> <view class=‘comShare-list‘ wx:if="{{index % 2 === 0}}"> <view class=‘comShare-img‘> <view class=‘comShare-img2‘ bindtouchstart="mytouchstart" bindtouchend="mytouchend" catchtap=‘longAndshort‘ data-id=‘{{item.id}}‘ data-object_id=‘{{item.object_id}}‘></view> <image class="item-img" wx:if="{{item.type==1 && item.more.suolue}}" src="{{item.more.suolue[0].url}}" mode="widthFix"></image> <image class="item-img" wx:elif="{{item.type==1}}" src="{{item.more.photos[0].url}}" mode="widthFix"></image> <video class="item-img" wx:if="{{item.type==2}}" src="{{item.video}}" autoplay="{{false}}" mode="widthFix"></video> <view class=‘comShareL-text‘>{{item.post_content}}</view> </view> <view class="comShareL-btm"> <view class=‘comShareL-btm-left‘ catchtap=‘goUserdetails‘ data-user_id=‘{{item.user_id}}‘> <image class="userimg" src="{{item.avatar}}" mode="aspectFit"></image> <text class="username">{{item.user_nickname}}</text> </view> <view class=‘comShareL-btm-right‘ catchtap=‘upZan‘ data-user_id=‘{{item.user_id}}‘ data-zan_index=‘{{index}}‘ data-zan_id=‘{{item.id}}‘ data-zan_zt=‘{{item.zan_article}}‘> <view class=‘CBRL‘ wx:if="{{paramData.recommended===1}}"> <image class="userimg2" src="../../pages/src/img/hg.png" mode="aspectFit"></image> <text class=‘attention‘>{{item.paiming}}</text> </view> <view class=‘CBRR‘> <image class=‘userimg2‘ mode="aspectFit" src=‘../../pages/src/img/xx3.png‘ wx:if="{{unlisted}}"></image> <image class=‘userimg2‘ mode="aspectFit" src=‘../../pages/src/img/xx3.png‘ wx:if="{{item.zan_article==2}}"></image> <image class=‘userimg2‘ mode="aspectFit" src=‘../../pages/src/img/xx2.png‘ wx:if="{{item.zan_article==1}}"></image> <text class=‘attention‘>{{item.post_like}}</text> </view> </view> </view> </view> </block> </view> <view class="comShare-list-right"> <block wx:for="{{listData}}" wx:key="index"> <view class=‘comShare-list‘ wx:if="{{index % 2 != 0}}"> <view class=‘comShare-img‘> <view class=‘comShare-img2‘ bindtouchstart="mytouchstart" bindtouchend="mytouchend" catchtap=‘longAndshort‘ data-id=‘{{item.id}}‘ data-object_id=‘{{item.object_id}}‘></view> <image class="item-img" wx:if="{{item.type==1 && item.more.suolue}}" src="{{item.more.suolue[0].url}}" mode="widthFix"></image> <image class="item-img" wx:elif="{{item.type==1}}" src="{{item.more.photos[0].url}}" mode="widthFix"></image> <video class="item-img" wx:if="{{item.type==2}}" src="{{item.video}}" autoplay="{{false}}" mode="widthFix"></video> <view class=‘comShareL-text‘>{{item.post_content}}</view> </view> <view class="comShareL-btm"> <view class=‘comShareL-btm-left‘ catchtap=‘goUserdetails‘ data-user_id=‘{{item.user_id}}‘> <image class="userimg" src="{{item.avatar}}" mode="aspectFit"></image> <text class="username">{{item.user_nickname}}</text> </view> <view class=‘comShareL-btm-right‘ catchtap=‘upZan‘ data-user_id=‘{{item.user_id}}‘ data-zan_index=‘{{index}}‘ data-zan_id=‘{{item.id}}‘ data-zan_zt=‘{{item.zan_article}}‘> <view class=‘CBRL‘> <image class="userimg2" src="../../pages/src/img/hg.png" mode="aspectFit" wx:if="{{paramData.recommended===1}}"></image> <text class=‘attention‘ wx:if="{{paramData.recommended===1}}">{{item.paiming}}</text> </view> <view class=‘CBRR‘> <image class=‘userimg2‘ mode="aspectFit" src=‘../../pages/src/img/xx3.png‘ wx:if="{{unlisted}}"></image> <image class=‘userimg2‘ mode="aspectFit" src=‘../../pages/src/img/xx3.png‘ wx:if="{{item.zan_article==2}}"></image> <image class=‘userimg2‘ mode="aspectFit" src=‘../../pages/src/img/xx2.png‘ wx:if="{{item.zan_article==1}}"></image> <text class=‘attention‘>{{item.post_like}}</text> </view> </view> </view> </view> </block> </view> </view>
========================wxcs======================
.comShare-all { width: 100%; column-count: 2; column-gap: 0rpx; display:flex; background: #fff; } .comShare-list{ margin-bottom: 10rpx; overflow: hidden; text-overflow: ellipsis; margin:10rpx 5rpx; border-radius:10rpx; box-shadow:4rpx 4rpx 10rpx #aca9a8; width:97.5%; } .comShare-img { width:100%; height:100%; text-align: center; position: relative; } .comShare-img2 { position: absolute; width:100%; height:100%; z-index: 9999; } .ranking{ font-size: 40rpx; width: 120rpx; height: 60rpx; position: absolute; bottom: 12rpx; right: 0; } .rankingBK{ width: 100%; height: 100%; } .rankingTT{ position: absolute; bottom: 12rpx; right: 24rpx; color: #fff; font-size: 30rpx; } .item-img{ width: 100%; border-top-left-radius: 10rpx; border-top-right-radius: 10rpx; } .comShareL-text{ text-align: left; padding: 0 10rpx; box-sizing: border-box; width: 100%; height: 60rpx; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size:30rpx; line-height:32rpx; } .comShare-list-left { width: 100%; overflow: hidden; } .comShare-list-right{ width: 100%; overflow: hidden; } .comShareL-btm { height: 50rpx; display: flex; overflow: hidden; justify-content: space-between; margin:0 10rpx; } .comShareL-btm-left,.comShareL-btm-right{ max-width:50%; display:flex; font-size:20rpx; align-items:center; overflow: hidden; } .CBRL,.CBRR{ display: flex; height: 100%; align-items: center; justify-content: center; margin-right: 10rpx; } .userimg { height: 40rpx; width: 40rpx; border-radius: 50%; margin-right: 10rpx; } .userimg2 { height: 100%; width: 30rpx; margin-right: 10rpx; } .username { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowarp; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .attention { font-size: 22rpx; color: #909090; } .comShare-list-imgBox{ width: 100%; height: auto; }
=========================JS=======================
var util = require(‘../../utils/util.js‘) Component({ properties: { pointerEvents: String, //设置样式 setStyle: Number, //搜索页传值 setBool: String, //测试 id: Number, //需要删除的笔记ID listData: Array, paramData: Object, categoryID:Number, //次级导航 modalMsg: { type: String, value: ‘ ‘, } }, data: { // 这里是一些组件内部数据 text: "text", setBool: ‘‘ }, created() { this.setData({ setBool: this.properties.setBool, categoryID: this.properties.categoryID }) }, methods: { onhide(){ this.setData({ pointerEvents: ‘none‘ }) }, onshow() { this.setData({ pointerEvents: ‘auto‘ }) }, //长短按删除 longAndshort: function (res) { let that = this; const setBool = this.properties.setBool; //触摸时间距离页面打开的毫秒数 var touchTime = that.data.touch_end - that.data.touch_start; //三目判断 如果setbool存在则赋值object_id,否则 id const id = setBool ? res.currentTarget.dataset.object_id : res.currentTarget.dataset.id; //如果按下时间大于350为长按 if (touchTime > 350) { wx.showModal({ title: ‘提示‘, content: ‘是否删除该内容?‘, success: function (res) { if (res.confirm) { const token = util.apiUrl.token; wx.request({ url: ‘https://haiyaxiaomoshu.com/wxapp/Portal/del_portal?id=‘ + id +‘&token=‘ + token, success: function (res) { const delFour = res.data.status; wx.showToast({ title: res.data.msg, }) if (delFour === 2){ } else { setTimeout(function () { wx.switchTab({ url: ‘../../pages/myCenter/myCenter‘ }) }, 1000) } } }) } else if (res.cancel) { } } }) } else { //点击进入产品信息详情 let categoryID = that.properties.categoryID; wx.navigateTo({ url: ‘../../pages/index/particulars?id=‘ + id + ‘&token=‘ + util.apiUrl.token + ‘&categoryID=‘ + categoryID }) } }, //按下事件开始 mytouchstart: function (e) { let that = this; that.setData({ touch_start: e.timeStamp }) }, //按下事件结束 mytouchend: function (e) { let that = this; that.setData({ touch_end: e.timeStamp }) }, //点赞 upZan: function (res) { const that = this; const indexL = res.currentTarget.dataset.zan_index //点赞的下标 const zanZt = res.currentTarget.dataset.zan_zt; //点赞的状态 const token = util.apiUrl.token; const object_id = res.currentTarget.dataset.zan_id; //要点赞的文章ID const typeID = 1; const data = { token, object_id, typeID } if (!wx.getStorageSync(‘token‘)) { // 如果token 为空跳转到登录 util.codeLoginFun(406); wx.showToast({ title: ‘请授权登陆!‘, icon: ‘none‘, duration: 2500 }) return; } const url = (zanZt === 1) ? ‘https://haiyaxiaomoshu.com/wxapp/Zan/del‘ : ‘https://haiyaxiaomoshu.com/wxapp/Zan/add‘; wx.request({ //调用取消接口 url, data, method: ‘POST‘, success: function (res) { wx.showToast({ title: res.data.msg, icon: ‘success‘, duration: 2000 }); that.triggerEvent(‘customevent‘); } }); }, //点击用户信息查看发布者详情 goUserdetails:function(res){ // 如果token 为空跳转到登录 if (!wx.getStorageSync(‘token‘)) { util.codeLoginFun(406); wx.showToast({ title: ‘请授权登陆!‘, icon: ‘none‘, duration: 2500 }) }; const id = res.currentTarget.dataset.user_id; wx.navigateTo({ url: ‘../../pages/index/userDetails?id=‘ + id }) } } })
<view class="comShare-all" id=‘britney‘ style=‘pointer-events:{{pointerEvents}}‘>
<view class="comShare-list-left">
<block wx:for="{{listData}}" wx:key="index">
<view class=‘comShare-list‘ wx:if="{{index % 2 === 0}}">
<view class=‘comShare-img‘>
<view class=‘comShare-img2‘ bindtouchstart="mytouchstart" bindtouchend="mytouchend" catchtap=‘longAndshort‘ data-id=‘{{item.id}}‘ data-object_id=‘{{item.object_id}}‘></view>
<image class="item-img" wx:if="{{item.type==1 && item.more.suolue}}" src="{{item.more.suolue[0].url}}" mode="widthFix"></image>
<image class="item-img" wx:elif="{{item.type==1}}" src="{{item.more.photos[0].url}}" mode="widthFix"></image>
<video class="item-img" wx:if="{{item.type==2}}" src="{{item.video}}" autoplay="{{false}}" mode="widthFix"></video>
<view class=‘comShareL-text‘>{{item.post_content}}</view>
</view>
<view class="comShareL-btm">
<view class=‘comShareL-btm-left‘ catchtap=‘goUserdetails‘ data-user_id=‘{{item.user_id}}‘>
<image class="userimg" src="{{item.avatar}}" mode="aspectFit"></image>
<text class="username">{{item.user_nickname}}</text>
</view>
<view class=‘comShareL-btm-right‘ catchtap=‘upZan‘ data-user_id=‘{{item.user_id}}‘ data-zan_index=‘{{index}}‘ data-zan_id=‘{{item.id}}‘ data-zan_zt=‘{{item.zan_article}}‘>
<view class=‘CBRL‘ wx:if="{{paramData.recommended===1}}">
<image class="userimg2" src="../../pages/src/img/hg.png" mode="aspectFit"></image>
<text class=‘attention‘>{{item.paiming}}</text>
</view>
<view class=‘CBRR‘>
<image class=‘userimg2‘ mode="aspectFit" src=‘../../pages/src/img/xx3.png‘ wx:if="{{unlisted}}"></image>
<image class=‘userimg2‘ mode="aspectFit" src=‘../../pages/src/img/xx3.png‘ wx:if="{{item.zan_article==2}}"></image>
<image class=‘userimg2‘ mode="aspectFit" src=‘../../pages/src/img/xx2.png‘ wx:if="{{item.zan_article==1}}"></image>
<text class=‘attention‘>{{item.post_like}}</text>
</view>
</view>
</view>
</view>
</block>
</view>
<view class="comShare-list-right">
<block wx:for="{{listData}}" wx:key="index">
<view class=‘comShare-list‘ wx:if="{{index % 2 != 0}}">
<view class=‘comShare-img‘>
<view class=‘comShare-img2‘ bindtouchstart="mytouchstart" bindtouchend="mytouchend" catchtap=‘longAndshort‘ data-id=‘{{item.id}}‘ data-object_id=‘{{item.object_id}}‘></view>
<image class="item-img" wx:if="{{item.type==1 && item.more.suolue}}" src="{{item.more.suolue[0].url}}" mode="widthFix"></image>
<image class="item-img" wx:elif="{{item.type==1}}" src="{{item.more.photos[0].url}}" mode="widthFix"></image>
<video class="item-img" wx:if="{{item.type==2}}" src="{{item.video}}" autoplay="{{false}}" mode="widthFix"></video>
<view class=‘comShareL-text‘>{{item.post_content}}</view>
</view>
<view class="comShareL-btm">
<view class=‘comShareL-btm-left‘ catchtap=‘goUserdetails‘ data-user_id=‘{{item.user_id}}‘>
<image class="userimg" src="{{item.avatar}}" mode="aspectFit"></image>
<text class="username">{{item.user_nickname}}</text>
</view>
<view class=‘comShareL-btm-right‘ catchtap=‘upZan‘ data-user_id=‘{{item.user_id}}‘ data-zan_index=‘{{index}}‘ data-zan_id=‘{{item.id}}‘ data-zan_zt=‘{{item.zan_article}}‘>
<view class=‘CBRL‘>
<image class="userimg2" src="../../pages/src/img/hg.png" mode="aspectFit" wx:if="{{paramData.recommended===1}}"></image>
<text class=‘attention‘ wx:if="{{paramData.recommended===1}}">{{item.paiming}}</text>
</view>
<view class=‘CBRR‘>
<image class=‘userimg2‘ mode="aspectFit" src=‘../../pages/src/img/xx3.png‘ wx:if="{{unlisted}}"></image>
<image class=‘userimg2‘ mode="aspectFit" src=‘../../pages/src/img/xx3.png‘ wx:if="{{item.zan_article==2}}"></image>
<image class=‘userimg2‘ mode="aspectFit" src=‘../../pages/src/img/xx2.png‘ wx:if="{{item.zan_article==1}}"></image>
<text class=‘attention‘>{{item.post_like}}</text>
</view>
</view>
</view>
</view>
</block>
</view>
</view>