1、首先打开微信开发者工具。
2、然后打开一个页面,找到wxml文件,点击打开。
3、在里面新建一个button按钮。
4、为这个按钮绑定一个事件addweibo,用来做跳转。
5、接着打开这个页面中的js文件。
6、在js文件中新建刚才绑定的函数addweibo。
7、在这个函数里面写上wx:navigateTo({url: '/pages/addweibo/addweibo',})其中url是要进行跳转的地址。然后打开模拟器预览就完成了。
可以把微信小程序隐藏起来。
打开微信“我”的页面,然后打开“设置”
2. 然后点开设置,在设置页面有个“通用”
3. 点开通用,再点开“发现页管理”
4. 打开发现页管理,把“小程序”关掉
5. 这样再返回“发现”页面看,就看不见小程序啦,”小程序“已经被隐藏了
<button bindtap="powerDrawer" type="primary" size="mini" style="width: 55%" data-statu="open">中奖记录</button>
<!-- 中间名单d窗 -->
<view class="drawer_div">
<view class="drawer_screen" bindtap="powerDrawer" data-statu="close" wx:if="{{showModalStatus}}"></view>
<view animation="{{animationPrize}}" class="drawer_box" wx:if="{{showModalStatus}}">
<view class="drawer_title">
中奖记录
<image src="../img/x@2x.png" bindtap="powerDrawer" data-statu="close"></image>
</view>
<view class="drawer_content">
<view class="top grid">
<text>
名称:啦啦啦啦啦啦啦啦
</text>
<text>
时间:2020-02-20
</text>
</view>
<view class="top grid">
<text>
名称:啦啦啦啦啦啦啦啦
</text>
<text>
时间:2020-02-20
</text>
</view>
</view>
</view>
</view>
.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: 650rpx
overflow: hidden
position: fixed
top: 50%
left: 0
z-index: 1001
background: #FAFAFA
margin: -150px 50rpx 0 50rpx
border-radius: 3px
}
.drawer_title{
padding:30rpx 20rpx
font-size: 36rpx
text-align: center
position: relative
}
.drawer_title image{
display: inline-block
width: 30rpx
height: 30rpx
position: absolute
right: 9px
top: 10px
}
.drawer_content {
height: 210px
overflow-y: scroll /*超出父盒子高度可滚动*/
padding: 0 20rpx
}
.top{
display: flex
justify-content: space-between
border-bottom: 1px dashed #ccc
}
.top text{
display: inline-block
height: 60rpx
line-height: 20rpx
}
data: {
animationPrize: {},
}
powerDrawer: function (e) {
// console.log(e)
let currentStatu = e.currentTarget.dataset.statu
this.util(currentStatu)
},
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({
animationPrize: animation.export()
})
// 第5步:设置定时器到指定时候后,执行第二组动画
setTimeout(function () {
// 执行第二组动画
animation.opacity(1).rotateX(0).step()
// 给数据对象储存的第一组动画,更替为执行完第二组动画的动画对象
this.setData({
animationPrize: animation
})
//关闭
if (currentStatu == "close") {
this.setData({
showModalStatus: false
})
}
}.bind(this), 200)
// 显示
if (currentStatu == "open") {
this.setData({
showModalStatus: true
})
}
},
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)