1.实现思路:分为三层:点击弹出的图片作为一层,蒙层作为一层,原界面显示作为一层
蒙层样式设为不可见,点击后添加该样式,点击close小图标,则移除该样式
2.实现代码:
wxml:
<!--pages/tes/test.wxml-->
<view>
<view class="add-btn" hover-class="plus-hover" bindtap="add_click">
<image src="/pages/images/add-btn.png"></image>
</view>
<view class="board {{hideStatus}}"></view>
<view class="resource_choose {{hideStatus}}">
<image class="floatImg" src="{{cover}}">
<image class="closeImg" src='/pages/images/close.png' bindtap="closeImg"></image>
<image class="shareImg" src='/pages/images/share.png' bindtap="shareResource"></image>
</image>
</view>
<block wx:for="{{alphe.length}}">
<block wx:if="{{section_list[alphe[index]].length>0}}">
<view class="section section_block" scroll-x="true">
<view class="first_litter">{{alphe[index]}}</view>
<block wx:for="{{section_list[alphe[index]]}}">
<view class="book_sharp" bindtap="showBookPicture" data-bookFilePath="{{item.bookFilePath}}" data-bookId="{{item.bookId}}" data-cover="{{item.bookCover}}">{{item.bookName}}</view>
</block>
</view>
</block>
</block>
</view>
js:
data: {
section_list:[],
alphe:"ABCDEFGHIJKLMNOPQRSTUVWXYZ",
cover:"",
hideStatus:".block_hide",
bookId:"",
bookFilePath:""
},
showBookPicture:function(e){
let that=this;
let cover = "data:image/png;base64," +e.currentTarget.dataset.cover;
let bookid = e.currentTarget.dataset.bookid;
let bookFilePath = e.currentTarget.dataset.bookfilepath;
that.setData({
cover: cover,
hideStatus:"",
bookId: bookid,
bookFilePath: bookFilePath
})
},
closeImg:function(){
this.setData({
hideStatus: ".block_hide"
})
},
css:
.board{
width:100%;
height:100%;
position:fixed;
z-index: 2;
background-color: rgba(0, 0, 0, 0.5);
}
.floatImg{
width:250px;
height:250px;
}
.closeImg{
left: 305px;
top: 130px;
}