小程序--左侧滑动查询条件

微信小程序 专栏收录该内容
30 篇文章 0 订阅

1 wxml

<!--index.wxml-->

<view>

<!-- 侧边滑动菜单 -->

  <view class="page-slidebar">

    <view class="page-content">

      <view class="userinfo">

        <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 点击获取头像昵称 </button>

        <block wx:else>

          <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>

          <text class="userinfo-nickname">{{userInfo.nickName}}</text>

        </block>

      </view>

      <view class="account-info">

        <view class="account-info-item">用户:{{YHMC}}</view>

        <view class="account-info-item">账号:{{YHZH}}</view>

        <view class="account-info-item">角色:{{YHJS}}</view>

        <view class="account-info-item">版本:{{version}}</view>

      </view>

      <view>

        <view class='quit-view'>

          <button class='quit-btn' bindtap='quit'>退出登录</button>

        </view>

      </view>

    </view>

  </view>

<!-- 主页内容 -->

  <view bindtouchmove="tap_drag" bindtouchend="tap_end" bindtouchstart="tap_start" class="page-top {{open ? ['c-state','cover'] : ''}} ">

    <view class="usermotto">

      <text class="user-motto">{{motto}}</text>

    </view>

  </view>

  <!-- 添加侧拉悬浮按钮 -->

  <view bindtap="openSlider">

    <image class="floatbutton {{open ? 'c-button-open' : '' }}" src="../../../image/icon_add.png"></image>

  </view>

</view>

 

2.js

 

const DEFAULT_PAGE = 0;

const app = getApp()

Page({  // 点击左下角小图标事件

  openSlider: function (e) {

    if (this.data.open) {

      this.setData({

        open: false

      });

    } else {

      this.setData({

        open: true

      });

    }

  },

  tap_start: function (e) {

    // touchstart事件

    // 把手指触摸屏幕的那一个点的 x 轴坐标赋值给 mark 和 newmark

    this.data.mark = this.data.newmark = e.touches[0].pageX;

  },

  tap_drag: function (e) {

    // touchmove事件

    this.data.newmark = e.touches[0].pageX;

    // 手指从左向右移动

    if (this.data.mark < this.data.newmark) {

      this.istoright = true;

    }

    // 手指从右向左移动

    if (this.data.mark > this.data.newmark) {

      this.istoright = false;

    }

    this.data.mark = this.data.newmark;

  },

  tap_end: function (e) {

    // touchend事件

    this.data.mark = 0;

    this.data.newmark = 0;

    // 通过改变 opne 的值,让主页加上滑动的样式

    if (this.istoright) {

      this.setData({

        open: true

      });

    } else {

      this.setData({

        open: false

      });

    }

  }

 

})

 

3.css

 

/**index.wxss**/

.userinfo {

  display: flex;

  flex-direction: column;

  align-items: center;

}

 

.userinfo-avatar {

  width: 128rpx;

  height: 128rpx;

  margin: 20rpx;

  border-radius: 50%;

}

 

.userinfo-nickname {

  color: #aaa;

}

 

.account-info {

   margin-top: 50rpx;

}

.account-info-item {

  display: flex;

  align-items: center;

  height: 54px;

  margin-left: 10rpx;

  border-bottom: 1px solid #eee;

}


 

/* 侧边栏样式 */

.page-slidebar {

    height: 100%;

    width: 65%;

    position: fixed;

    background-color:white;

    z-index: 0;

}

 /* 主页样式 */

.page-top {

    height: 100%;

    position: fixed;

    width: 100%;

    background-color:white;

    z-index: 0;

    transition: All 0.4s ease;

    -webkit-transition: All 0.4s ease;

}

 

/* 控制侧边栏的内容距离顶部的距离 */

.page-content {

    padding-top: 60rpx;

}

 

/* 当屏幕向左滑动,出现侧边栏的时候,主页的动画样式 */

/* scale:取值范围 0~1 ,表示屏幕大小是原来的百分之几,可以自己修改成 0.8 试下*/

/* translate(60%,0%) 表示向左滑动的时候,侧边栏占用平时的宽度为 60%   */

.c-state {

    transform: rotate(0deg) scale(1) translate(65%, 0%);

    -webkit-transform: rotate(0deg) scale(1) translate(65%, 0%);

}

 

.floatbutton {

  position: fixed;

  width: 100rpx;

  height: 100rpx;

  bottom: 140rpx;

  left: 40rpx;

  z-index: 9999;

}

 

.c-button-open {

  transform: rotate(180deg) scale(1) translate(65%, 0%);

  -webkit-transform: rotate(180deg) scale(1) translate(65%, 0%);

  transition-duration:0.5s;

  -webkit-transition-duration: 0.5s;

  left: 60%;

}

 

/* 遮盖层样式 */

.cover{

    width: 100%;

    height: 100%;

    background-color:gray;

    opacity: 0.5;

    z-index: 9000;

}

 

.quit-view {

  height: 5%;

  width: 65%;

}

 

.quit-btn {

  position: fixed;

  bottom: 5rpx;

  z-index: 999;

  color: #fff;

  width: 65%;

  border-radius: 5rpx;

  background-color: #064acb;

}

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
<p> <span style="font-size:14px;color:#337FE5;">【为什么学爬虫?】</span> </p> <p> <span style="font-size:14px;">       1、爬虫入手容易,但是深入较难,如何写出高效率的爬虫,如何写出灵活性高可扩展的爬虫都是一项技术活。另外在爬虫过程中,经常容易遇到被反爬虫,比如字体反爬、IP识别、验证码等,如何层层攻克难点拿到想要的数据,这门课程,你都能学到!</span> </p> <p> <span style="font-size:14px;">       2、如果是作为一个其他行业的开发者,比如app开发,web开发,学习爬虫能让你加强对技术的认知,能够开发出更加安全的软件和网站</span> </p> <p> <br /> </p> <span style="font-size:14px;color:#337FE5;">【课程设计】</span> <p class="ql-long-10663260"> <span> </span> </p> <p class="ql-long-26664262" style="font-size:11pt;color:#494949;"> 一个完整的爬虫程序,无论大小,总体来说可以分成三个步骤,分别是: </p> <ol> <li class="" style="font-size:11pt;color:#494949;"> 网络请求:模拟浏览器的行为从网上抓取数据。 </li> <li class="" style="font-size:11pt;color:#494949;"> 数据解析:将请求下来的数据进行过滤,提取我们想要的数据。 </li> <li class="" style="font-size:11pt;color:#494949;"> 数据存储:将提取到的数据存储到硬盘或者内存中。比如用mysql数据库或者redis等。 </li> </ol> <p class="ql-long-26664262" style="font-size:11pt;color:#494949;"> 那么本课程也是按照这几个步骤循序渐进的进行讲解,带领学生完整的掌握每个步骤的技术。另外,因为爬虫的多样性,在爬取的过程中可能会发生被反爬、效率低下等。因此我们又增加了两个章节用来提高爬虫程序的灵活性,分别是: </p> <ol> <li class="" style="font-size:11pt;color:#494949;"> 爬虫进阶:包括IP代理,多线程爬虫,图形验证码识别、JS加密解密、动态网页爬虫、字体反爬识别等。 </li> <li class="" style="font-size:11pt;color:#494949;"> Scrapy和分布式爬虫:Scrapy框架、Scrapy-redis组件、分布式爬虫等。 </li> </ol> <p class="ql-long-26664262" style="font-size:11pt;color:#494949;"> 通过爬虫进阶的知识点我们能应付大量的反爬网站,而Scrapy框架作为一个专业的爬虫框架,使用他可以快速提高我们编写爬虫程序的效率和速度。另外如果一台机器不能满足你的需求,我们可以用分布式爬虫让多台机器帮助你快速爬取数据。 </p> <p style="font-size:11pt;color:#494949;">   </p> <p class="ql-long-26664262" style="font-size:11pt;color:#494949;"> 从基础爬虫到商业化应用爬虫,本套课程满足您的所有需求! </p> <p class="ql-long-26664262" style="font-size:11pt;color:#494949;"> <br /> </p> <p> <br /> </p> <p> <span style="font-size:14px;background-color:#FFFFFF;color:#337FE5;">【课程服务】</span> </p> <p> <span style="font-size:14px;">专属付费社群+定期答疑</span> </p> <p> <br /> </p> <p class="ql-long-24357476"> <span style="font-size:16px;"><br /> </span> </p> <p> <br /> </p> <p class="ql-long-24357476"> <span style="font-size:16px;"></span> </p>
©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值