微信小程序 浮球点击弹出侧滑菜单
index.wxml:<view class="float-action" bindtap="ballClickEvent" style="opacity: {{ballOpacity}};bottom:{{ballBottom}}px;right:{{ballRight}}px;" bindtouchmove="ballMoveEvent">
</view>
<view class="slide-mask" style="display:{{maskDisplay}}" bindtap="slideCloseEvent"></view>
<view class="slide-menu" style="right: {{slideRight}}px;width: {{slideWidth}}px;height:{{slideHeight}}px;" animation="{{slideAnimation}}">
<icon type="cancel" size="30" class="close-btn" color="#FFF" bindtap="slideCloseEvent" />
<scroll-view scroll-y="true" style="height:100%;width:100%">
<view class="header">
<view class="userinfo" bindtap="authorShowEvent">
<image src="{{avatarUrl}}" class="avatar"></image>
<text>{{nickName}}</text>
</view>
<view class="toolbar">
<view class="item">
<image src="../../images/fav.png"></image>
<text>收藏</text>
</view>
<view class="item" bindtap="toSettingPage">
<image src="../../images/setting.png"></image>
<text>设置</text>
</view>
</view>
</view>
<view class="menu-item home">
<text>首页</text>
</view>
<view class="slide-inner">
<block wx:for="{{themeData}}">
<view class="menu-item" data-id="{{item.id}}" bindtap="toThemePage">
<text>{{item.name}}</text>
<image src="../../images/plus.png"></image>
</view>
</block>
</view>
</scroll-view>
</view>
index.wxss:
/*slide-menu*/
.slide-mask {
position: fixed;
width: 100%;
top: 0;
left: 0;
bottom: 0;
background: rgba(0, 0, 0, .3);
z-index: 800;
}
.slide-menu {
position: fixed;
top: 0;
background: #FFF;
z-index: 900;
}
.slide-menu .header {
background: #43CD80;
height: 200rpx;
color: #FFF;
padding: 20rpx 40rpx 0 40rpx;
}
.userinfo {
height: 80rpx;
line-height: 80rpx;
overflow: hidden;
}
.userinfo .avatar {
width: 80rpx;
height: 80rpx;
border-radius: 50%;
margin-right: 40rpx;
float: left;
}
.userinfo text {
float: left;
font-size: 35rpx;
}
/*收藏与设置样式*/
.toolbar {
height: 100rpx;
padding-top: 25rpx;
line-height: 75rpx;
}
.toolbar .item {
width: 50%;
display: inline-block;
overflow: hidden;
text-align: center
}
.toolbar .item text {
display: inline-block;
font-size: 30rpx
}
.toolbar .item image {
display: inline-block;
position: relative;
top: 10rpx;
margin-right: 10rpx;
height: 50rpx;
width: 50rpx;
}
.home-icon {
position: absolute;
top: 25rpx;
left: 40rpx;
}
.home-text {
position: absolute;
left: 100rpx;
}
.slide-menu .menu-item {
position: relative;
height: 100rpx;
line-height: 100rpx;
padding: 0 40rpx;
font-size: 35rpx;
}
.slide-menu .menu-item:active {
background: #FAFAFA;
}
.slide-menu .menu-item image {
position: absolute;
top: 25rpx;
right: 40rpx;
width: 50rpx;
height: 50rpx;
}
.slide-menu .home {
color: #019DD6
}
.slide-menu .close-btn {
position: absolute;
top: 20rpx;
right: 40rpx;
z-index: 1000
}
/*swiper*/
page .wx-swiper-dots.wx-swiper-dots-horizontal{
margin-bottom: 2rpx;
}
page .wx-swiper-dot{
width:40rpx;
display: inline-flex;
height: 10rpx;
margin-left: 20rpx;
justify-content:space-between;
}
page .wx-swiper-dot::before{
content: '';
flex-grow: 1;
background: rgba(255,255,255,0.8);
border-radius: 8rpx
}
page .wx-swiper-dot-active::before{
background:rgba(244,0,0,0.8);
}
/*热门书单*/
.hot-books{
padding: 20rpx 0;
height: 440rpx;
margin-bottom: 10rpx;
box-shadow: 0 2rpx 4rpx 4rpx #ededed;
}
.hb-bar{
height: 60rpx;
padding: 0 20rpx;
margin:10rpx 0 20rpx 0;
border-left:10rpx solid #1aad16;
display: flex;
align-items: flex-end;
}
.hb-bar text{
font: 33rpx "SimSun";
color:#494949;
font-weight: bold;
}
.hb-bar image{
width: 40rpx;
height: 40rpx;
}
.hb-booklist{
display: flex;
justify-content: space-around;
}
.hb-book{
display: flex;
flex-direction: column;
align-items: flex-start;
}
.hb-book image{
width: 170rpx;
height: 251rpx;
}
.hb-book .book-name{
display: block;
max-width: 170rpx;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 29rpx;
font-weight: bold;
color:#494949;
padding: 16rpx 0;
}
.hb-book progress{
width: 120rpx;
}
.book-grade{
display: flex;
}
.book-grade .grade{
padding-left: 20rpx;
font-size: 27rpx;
color: #FDB235;
}
app.wxss:
page {
position: relative;
height: 100%;
}
.float-action {
position: absolute;
bottom: 20px;
right: 30px;
width: 50px;
height: 50px;
border-radius: 50%;
box-shadow: 2px 2px 10px #AAA;
background: #00CD66;
z-index: 100;
}
评论