版权声明：菜鸟老五 https://blog.csdn.net/qq_35695041/article/details/81279073
/* 页面背景 */
page{
/* overflow-y: hidden; */
background-color: #fff;
}
/**顶部tab切换样式 */
.navbar{
position:fixed;
top: 0;
width: 100%;
height: 80rpx;
line-height: 80rpx;
z-index:999;
display: flex;
background: #fff;
}
.total{
position: relative;
}
/* 默认选中菜单 */
.navbar .item{
position: relative;
flex: auto;
height: 80rpx;
font-size: 30rpx;
width: 100rpx;
text-align: center;
line-height: 80rpx;
background-color: #efefef;
color: #b3b3b3;
}
/* 选中菜单样式 */
.navbar .item.active{
color: #333333;
background-color:#f8f8f8;
}
/* 字体 */
.navbar .item.active:after{
content: "";
display: block;
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 4rpx;
}
/* tab内容 */
.cont{
position: relative;
text-align: center;
top: 100rpx;
width: 100%;
z-index: 2;
height:350rpx;
/* background-color: red; */
}
/* list列表 */
.list{
position: relative;
bottom: 0rpx;
width: 55%;
display: inline-block;
height: 80rpx;
line-height: 80rpx;
border-bottom: 2rpx solid #d8d8d8;
}
/* 标题 */
.list_name{
position:absolute;
font-size: 30rpx;
left: 30rpx;
}
/* 删除 */
.list_del{
position:absolute;
font-size: 26rpx;
right: 30rpx;
}
/* 分享图标 */
.share_img{
position: relative;
top: 2rpx;
margin-right: 5rpx;
width: 22rpx;
height: 22rpx;
}
/* 图片 */
.list_img{
position:relative;
top: 10rpx;
width:55%;
height: 216rpx;
border-radius:20rpx;
}
/* 底部背景视图 */
.cont_bg_img{
width: 100%;
height:184rpx;
position: fixed;
bottom: 0;
}
/*重写样式radio */
page {
background: #fff;
border-top: 1rpx solid #fff;
}
/*111111111111111111111111111111111 */
/*mask 遮罩背景*/
.drawer_screen {
width: 100%;
height: 100%;
position: fixed;
top:0;
left: 0;
z-index: 1000;
background: #000;
opacity: 0.5;
overflow: hidden;
}
/*content*/
.drawer_box {
width: 100%;
height: 210rpx;
overflow: hidden;
position: fixed;
bottom: 0rpx;
left: 0;
z-index: 1001;
background: #fafafa;
}
/* 分享到 */
.drawer_title {
width:100%;
position: relative;
height: 80rpx;
line-height: 80rpx;
}
/* 分享到标题 */
.lab_share{
font-size: 28rpx;
position: absolute;
left: 30rpx;
color: #aaa;
}
/* share_icon视图 */
.pages{
position: relative;
width:150rpx;
height:120rpx;
text-align: center;
left: 20rpx;
float: left;
}
/* 转发button 必须使用button 借用其属性 */
button{
width:150rpx;
height:73rpx;
border: 0;
color: white;
}
button:after{
border: 0;
}
/* 分享ICOn */
.share_icon{
position: relative;
display: inline-block;
text-align: center;
width: 72rpx;
height: 72rpx;
}
/* 分享ICON标题 */
.share_title{
position: relative;
bottom: 5rpx;
text-align: center;
font-size: 24rpx;
width: 150rpx;
height: 40rpx;
color: #333;
display:inline-block;
}
<!-- 动画弹窗 -->
<!--mask catchtouchmove="move" 组织底部内容滑动-->
<view class="drawer_screen" catchtouchmove="move" bindtap="power_close" data-statu="close" wx:if="{{showModalStatus}}"></view>
<!--content-->
<!--使用animation属性指定需要执行的动画-->
<view animation="{{animationData}}" class="drawer_box" wx:if="{{showModalStatus}}">
<!--drawer content-->
<view class="drawer_title">
<label class='lab_share'>分享到</label>
</view>
<!-- 分享图标 -->
<view class='pages' wx:for='{{imgArr}}' wx:key="key">
<!-- 分享ICON -->
<button open-type="share"><image class='share_icon' open-type="share" src='{{item.image}}' bindtap='previewImg'></image></button>
<!-- 分享ICON标题 -->
<label class='share_title'>{{item.name}}</label>
</view>
</view>
<!-- -->
<!--导航条-->
<view class="navbar">
<lable wx:for="{{navbar}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" wx:key="unique" bindtap="navbarTap">
<text>{{item}}</text></lable>
</view>
<!--未使用-->
<view hidden="{{currentTab!==0}}" class='total'>
<!-- <!-外层-> -->
<view wx:if='{{list.length>0}}'>
<!-- 外层 -->
<view class='cont' wx:for="{{list}}" wx:key="key">
<!-- list列表 -->
<view class='list'>
<!-- list标题 -->
<label class='list_name'>
{{item.name}}
</label>
<!-- 删除 -->
<label class='list_del'bindtap="powerDrawer">
<!-- 分享图标 -->
<image class='share_img' src='../../image/red_packet/share.png' ></image>
分享
</label>
</view>
<!-- tupian -->
<image class='list_img' src='{{item.list_img}}'></image>
</view> </view>
<!-- 数据为空显示 -->
<view wx:else>
<!-- 外层 -->
<view class='cont' style='color:#999;'>
暂无红包可用哦~~
</view> </view>
<!-- 数据为空显示 -->
<!-- 底部背景 -->
<!-- <view
class='cont_bg_img'> -->
<image class='cont_bg_img' src='../../image/red_packet/bottom_bg.png'></image>
<!-- </view> -->
</view>
<!--已使用-->
<view hidden="{{currentTab!==1}}">
<!-- 外层 -->
<view wx:if="{{lists.length>0}}">
<view class='cont' wx:for="{{lists}}" wx:key="key">
<!-- list列表 -->
<view class='list'>
<!-- list标题 -->
<label class='list_name'>
{{item.name}}
</label>
<!-- 删除 -->
<label class='list_del' bindtap='btn_del' data-index='{{index}}'>
删除
</label>
</view>
<!-- tupian -->
<image class='list_img' src='{{item.list_img}}'></image>
</view>
</view>
<view wx:else>
<view class='cont' style='color:#999;'>
暂无红包哦~~
</view>
</view>
<!-- 底部背景 -->
<!-- <view
class='cont_bg_img'> -->
<image class='cont_bg_img' src='../../image/red_packet/bottom_bg.png'></image>
<!-- </view> -->
</view>
var app = getApp()
// 后台域名连接地址
var host = getApp().globalData.url
Page({
data: {
navbar: ['未使用', '已使用'],
currentTab: 0,
list: [{
"name": "瑰珀翠100元红包",
list_img: "../../image/red_packet/red.png"
},
{
"name": "瑰珀翠100元红包",
list_img: "../../image/red_packet/red.png"
},
{
"name": "瑰珀翠100元红包",
list_img: "../../image/red_packet/red.png"
}, {
"name": "瑰珀翠100元红包",
list_img: "../../image/red_packet/red.png"
},
],
lists: [{
"name": "瑰珀翠100元红包",
list_img: "../../image/red_packet/show_red.png"
},
{
"name": "瑰珀翠100元红包",
list_img: "../../image/red_packet/show_red.png"
},
{
"name": "瑰珀翠100元红包",
list_img: "../../image/red_packet/show_red.png"
}, {
"name": "瑰珀翠100元红包",
list_img: "../../image/red_packet/show_red.png"
},
],
// 弹窗
showModalStatus: false,
// 分享图标标题show_red.png
imgArr: [{ name: "微信好友", image: '../../image/red_packet/wechart.png' }
, { name: "微信朋友圈", image: '../../image/red_packet/frend_q.png' }
, { name: "QQ", image: '../../image/red_packet/qq.png' }
],
},
// 弹出遮罩层，组织底部内容滑动
move:function(){},
onLoad: function (opt) {
// 获取数据在时候必须加上
wx.showShareMenu({
withShareTicket: true
})
/** 判断场景值，1044 为转发场景，包含shareTicket 参数 */
if (opt.scene == 1044) {
wx.getShareInfo({
shareTicket: opt.shareTicket,
success: function (res) {
var encryptedData = res.encryptedData;
var iv = res.iv;
console.log(res)
}
})
}
},
onShareAppMessage: function (res) {
var that = this;
wx.getSystemInfo({
success: function (res) {
that.setData({
windowHeight: res.windowHeight + "px",
})
}
})
if (res.from === 'button') {
// 来自页面内转发按钮
console.log(res.target);
this.setData({
showModalStatus: false
})
}
return {
title: '红包',
path: '/pages/index/index?id=123',
success: function (res) {
// 转发成功
console.log(res);
this.setData({
showModalStatus: false
})
},
fail: function (res) {
// 转发失败
console.log("wocao")
}
}
},
// 弹窗
powerDrawer: function (e) {
var that = this;
that.setData({
showModalStatus:true
})
console.log(e);
},
// 关闭
power_close:function(e){
var that = this;
that.setData({
showModalStatus: false
})
},
util: function (currentStatu) {
/* 动画部分 */ // 第1步：创建动画实例
var animation = wx.createAnimation({
duration: 200,
//动画时长
timingFunction: "linear",
//线性
delay: 0 //0则不延迟
}); // 第2步：这个动画实例赋给当前的动画实例
this.animation = animation;
// 第3步：执行第一组动画
animation.opacity(0).rotateX(-100).step();
// 第4步：导出动画对象赋给数据对象储存
this.setData({ animationData: animation.export() })
// 第5步：设置定时器到指定时候后，执行第二组动画
setTimeout(function () {
// 执行第二组动画
animation.opacity(1).rotateX(0).step();
// 给数据对象储存的第一组动画，更替为执行完第二组动画的动画对象
this.setData({ animationData: animation })
//关闭
if (currentStatu == "close") { this.setData({ showModalStatus: false }); }
}.bind(this), 200) // 显示
if (currentStatu == "open") { this.setData({ showModalStatus: true }); }
},
//顶部tab切换
navbarTap: function(e) {
this.setData({
currentTab: e.currentTarget.dataset.idx
})
},
// 删除事件
btn_del:function(e){
var that = this;
// console.log(e.currentTarget.dataset.index);
var index = e.currentTarget.dataset.index
var list = that.data.lists;
wx.showModal({
title: '提示',
content: '确认删除吗?',
success:function(res){
console.log(res.confirm);
if (res.confirm){
console.log(index);
list.splice(index, 1);
// 如果数据为空
if (!list.length) {
that.setData({
lists: list,
lists_shows: false
});
} else {
that.setData({
lists: list
});
}
}else{
console.log(res);
}
}
})
// wx.showModal({
// title: '提示',
// content: '删除事件暂未开发',
// })
},
})