GIF.gif
case.wxss
page{
background-color: #F5F5F5;
}
/* 按钮固定在右下边角
.up_img{
position: fixed;
bottom: 30rpx;
right: 30rpx;
width: 100rpx;
height: 100rpx;
} */
/* z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
元素可拥有负的 z-index 属性值。
Z-index 仅能在定位元素上奏效（例如 position:absolute;）！ */
.img-plus-style {
height: 150rpx;
width: 150rpx;
position: absolute;
bottom: 250rpx;
right: 100rpx;
z-index: 100;
}
/* opacity 属性设置元素的不透明级别。
规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）。 */
.img-style {
height: 150rpx;
width: 150rpx;
position: absolute;
bottom: 250rpx;
right: 100rpx;
opacity: 0;
}
.container{
display: flex;
flex-direction: column;
}
.content_one_line{
display: flex;
flex-direction:row;
}
.example-img-style {
height: 150rpx;
width: 150rpx;
}
.root{
margin-top: 30rpx;
margin-left: 30rpx;
}
case.json
{
"navigationBarBackgroundColor": "#0099FF"
}
case.json
<view>
<image wx:if="{{!isManClick}}" src="/images/ic_man_normal.png" class="img-style" animation="{{animMan}}" bindtap="manOnclick"></image>
<image wx:else src="/images/ic_man_select.png" class="img-style" animation="{{animMan}}" bindtap="manOnclick"></image>
<image wx:if="{{!isWomanClick}}" src="/images/ic_woman_normal.png" class="img-style" animation="{{animWoman}}" bindtap="womanOnClick"></image>
<image wx:else src="/images/ic_woman_select.png" class="img-style" animation="{{animWoman}}" bindtap="womanOnClick"></image>
<image wx:if="{{!isTalkClick}}" src="/images/ic_talk_normal.png" class="img-style" animation="{{animTalk}}" bindtap="talkOnclick"></image>
<image wx:else src="/images/ic_talk_select.png" class="img-style" animation="{{animTalk}}" bindtap="talkOnclick"></image>
<image wx:if="{{!isPopping}}" src="/images/ic_add_normal.png" class="img-plus-style" animation="{{animPlus}}" bindtap="plus"></image>
<image wx:else src="/images/ic_add_select.png" class="img-plus-style" animation="{{animPlus}}" bindtap="plus"></image>
</view>
<view class='root'>
<text>功能图标说明如下：</text>
<view class='content_one_line'>
<view class='container'>
<image src="/images/ic_man_normal.png" class="example-img-style" ></image>
<text>男神</text>
</view>
<view class='container'>
<image src="/images/ic_woman_normal.png" class="example-img-style" ></image>
<text>女神</text>
</view>
<view class='container'>
<image src="/images/ic_talk_normal.png" class="example-img-style" ></image>
<text>找话题</text>
</view>
</view>
</view>
case.json
Page({
data: {
isPopping: false,//是否已经弹出
animPlus: {},//中心加号 旋转动画
animTalk: {},//话题 位移,透明度
animWoman: {},//女神 位移,透明度
animMan: {},//男神 位移,透明度
isManClick:false,
isWomanClick:false,
isTalkClick:false,
case_example_data:{
case_title:"",
case_example_pic_path_1:"",
case_example_pic_path_2: "",
}
},
//点击弹出
plus: function () {
console.log("点击弹出=========")
console.log("this.data.isPopping=========" + this.data.isPopping)
if (!this.data.isPopping) {
//缩回动画
this.popp();
this.setData({
isPopping: true,
isManClick: false,
isWomanClick: false,
isTalkClick: false
})
} else if (this.data.isPopping) {
//弹出动画
this.takeback();
this.setData({
isPopping: false
})
}
},
manOnclick: function () {
var that = this;
console.log("manOnclick")
this.setData({
isManClick:true,
isPopping:false,
case_example_data: {
case_title: "男神",
case_example_pic_path_1: "/images/ic_handsome_man_01.jpg",
case_example_pic_path_2: "/images/ic_handsome_man_02.jpg",
}
})
//将对象转为string
var caseExampleData = JSON.stringify(that.data.case_example_data)
this.takeback();
wx.navigateTo({
url: '/pages/case/case_example/case_example?caseExampleData=' + caseExampleData
})
},
womanOnClick: function () {
var that = this;
console.log("womanOnclick")
this.setData({
isWomanClick: true,
isPopping: false,
case_example_data: {
case_title: "女神",
case_example_pic_path_1: "/images/ic_beautiful_woman_01.jpg",
case_example_pic_path_2: "/images/ic_beautiful_woman_02.jpg",
}
})
//将对象转为string
var caseExampleData = JSON.stringify(that.data.case_example_data)
this.takeback();
wx.navigateTo({
url: '/pages/case/case_example/case_example?caseExampleData=' + caseExampleData
})
},
talkOnclick: function () {
var that = this;
console.log("talkClick")
this.setData({
isTalkClick: true,
isPopping: false,
case_example_data: {
case_title: "找话题",
case_example_pic_path_1: "/images/ic_talk_example_01.jpg",
case_example_pic_path_2: "/images/ic_talk_example_02.jpg",
}
})
//将对象转为string
var caseExampleData = JSON.stringify(that.data.case_example_data)
this.takeback();
wx.navigateTo({
url: '/pages/case/case_example/case_example?caseExampleData=' + caseExampleData
})
},
//弹出动画
popp: function () {
//plus顺时针旋转
var animationPlus = wx.createAnimation({
duration: 500,
timingFunction: 'ease-out'
})
var animationTalk = wx.createAnimation({
duration: 500,
timingFunction: 'ease-out'
})
var animationWoman = wx.createAnimation({
duration: 500,
timingFunction: 'ease-out'
})
var animationMan = wx.createAnimation({
duration: 500,
timingFunction: 'ease-out'
})
animationPlus.rotateZ(180).step();
animationTalk.translate(-100, 100).rotateZ(360).opacity(1).step();
animationWoman.translate(-140, 0).rotateZ(360).opacity(1).step();
animationMan.translate(-100, -100).rotateZ(360).opacity(1).step();
this.setData({
animPlus: animationPlus.export(),
animTalk: animationTalk.export(),
animWoman: animationWoman.export(),
animMan: animationMan.export(),
})
},
//收回动画
takeback: function () {
//plus逆时针旋转
var animationPlus = wx.createAnimation({
duration: 500,
timingFunction: 'ease-out'
})
var animationTalk = wx.createAnimation({
duration: 500,
timingFunction: 'ease-out'
})
var animationWoman = wx.createAnimation({
duration: 500,
timingFunction: 'ease-out'
})
var animationMan = wx.createAnimation({
duration: 500,
timingFunction: 'ease-out'
})
animationPlus.rotateZ(0).step();
animationMan.translate(0, 0).rotateZ(0).opacity(0).step();
animationWoman.translate(0, 0).rotateZ(0).opacity(0).step();
animationTalk.translate(0, 0).rotateZ(0).opacity(0).step();
this.setData({
animPlus: animationPlus.export(),
animTalk: animationTalk.export(),
animWoman: animationWoman.export(),
animMan: animationMan.export(),
})
},
onLoad: function (options) {
// 生命周期函数--监听页面加载
},
onReady: function () {
// 生命周期函数--监听页面初次渲染完成
},
onShow: function () {
// 生命周期函数--监听页面显示
},
onHide: function () {
// 生命周期函数--监听页面隐藏
},
onUnload: function () {
// 生命周期函数--监听页面卸载
},
onPullDownRefresh: function () {
// 页面相关事件处理函数--监听用户下拉动作
},
onReachBottom: function () {
// 页面上拉触底事件的处理函数
},
onShareAppMessage: function () {
// 用户点击右上角分享
return {
title: 'title', // 分享标题
desc: 'desc', // 分享描述
path: 'path' // 分享路径
}
}
})
