<view class="container"> <view class="imglist"> <block wx:for="{{recommendeds}}" wx:for-item="recommended"> <view class="listbox"> <image src="{{recommended.src}}" mode="widthFix" data-id="{{recommended.id}}" bindtap="changeVideo"></image> <view class="item-header">{{recommended.title}}</view> <view wx:if="{{recommended.isDisplay=='0'}}" bindtap="kaitong"> <view class="mask"></view> <view class="suo_div"><image class="suo_img" src="/images/suo.png" ></image><text>开通</text></view> </view> </view> </block> </view> </view>
// page/Kecheng_All/index.js //获取应用实例 var app = getApp() Page({ /** * 页面的初始数据 */ data: { recommendeds:[{ title:'替委员听', username:'阿美', videotime:'01:38', src:'http://www.xxxx.com/a/images/img3.png', }, { title:'替委员听 代委员说', username:'阿美', videotime:'01:38', src:'http://www.xxxx.com/a/images/img3.png', } ,{ title:'替委员听 代委员说', username:'阿美', videotime:'01:38', src:'http://www.xxxx.com/a/images/img3.png', }, { title:'替委员听 代委员说', username:'阿美', videotime:'01:38', src:'http://www.xxxx.com/a/images/img3.png', }], }, /** * 生命周期函数--监听页面加载 */ onl oad: function (options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { var that = this; wx.request({ url: "https://www.xxxx.com/a/get.php?=&=", data: { open_id: '', juese_id: '' }, success: function (res) { console.log(res.data); if (res.data !="0") { that.setData({ recommendeds: res.data.data_list }); } else { } } }); }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { }, changeVideo: function (e) { console.log(e); var id = e.target.dataset.id; //console.log(id); //?id=' + id, wx.navigateTo({ url: '/page/Kecheng/index?id=' + id }) }, kaitong: function (e) { wx.showModal({ title: '', content: '请联系娄老师开通!', showCancel: false, success: res => { if (res.confirm) { } else if (res.cancel) { //console.log('取消') } } }) } })
.imglist{ /* flex-wrap: wrap; background: #fff; display: inline-flex; flex-direction: row; width: 100%; */ flex-wrap: wrap; background: #fff; display: inline-flex; flex-direction: row; width: 100%; display: flex; justify-content: space-between; } .imglist .listbox{ /* width: 50%; padding: 10rpx 2rpx 0 2rpx; display: inline-block; box-sizing: border-box; position: relative; overflow: hidden; */ /* display: inline-block; */ /* box-sizing: border-box; */ position: relative; overflow: hidden; width: 48%; margin: 0 1% 2% 1%; position: relative; } .imglist .listbox image{ width: 100%; height: 100%; } .imglist .listbox .item-header{ /* font-size: 32rpx; color: #fff; bottom: 0px; position: absolute; width: 100%; text-align: center; background-color: rgba(0, 0, 0, 0.2); line-height: 80rpx; */ /* font-size: 32rpx; color: #fff; bottom: 0px; position: absolute; width: 100%; text-align: center; background-color: rgba(0, 0, 0, 0.2); line-height: 80rpx; */ font-size: 32rpx; color: #666; bottom: 0px; /* position: absolute; */ width: 100%; text-align: center; /* background-color: rgba(0, 0, 0, 0.2); */ line-height: 50rpx; } .mask{ width: 100%; height: 100%; position: absolute; background-color: #000; z-index: 9999; top: 0; left: 0; opacity: 0.6; } .suo_div{ position: absolute; z-index: 9999; top: calc(50% - 25rpx); left: calc(50% - 57rpx); font-size: 32rpx; display: flex; align-items: center; vertical-align: center; justify-content: center; flex-direction: row; } .suo_img{ width: 50rpx !important; height: 50rpx !important; } .suo_div text{ /* position: fixed; */ color: #fff; }