用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
  • TA的每日心情
    慵懒
    2017-1-6 10:46
  • 签到天数: 2 天

    [LV.1]初来乍到

    173

    主题

    181

    帖子

    981

    金钱

    咫尺尊享

    Rank: 5Rank: 5

    积分
    0
    2017-1-19 13:21:53 柿霖不是林 咫尺尊享 楼主 63809
    这里有一个侧边栏,仅供学习使用,并没有设计;侧边栏
    也可以参考这个:
    微信小程序学习demo推荐:侧边栏滑动特效;四种特效




    [HTML] 纯文本查看 复制代码
    //index.js
     
    var util = require('../../utils/util.js')
    var app = getApp();
    Page({
      data: {
        feed: [],
        feed_length: 0,
        maskDisplay: 'none',
            slideHeight: 0,
            slideRight: 0,
            slideWidth: 0,
            screenHeight: 0,
            screenWidth: 0,
            slideDisplay: 'block',
            slideAnimation: {},
            userInfo: {},
      },
      //事件处理函数
      bindItemTap: function() {
        wx.navigateTo({
          url: '../answer/answer'
        })
      },
      bindQueTap: function() {
        wx.navigateTo({
          url: '../question/question'
        })
      },
      onLoad: function () {
        console.log('onLoad')
        var that = this
        //调用应用实例的方法获取全局数据
        wx.getSystemInfo( {
          success: function( res ) {
            that.setData( {
              screenHeight: res.windowHeight,
              screenWidth: res.windowWidth,
              slideHeight: res.windowHeight,
              slideRight: res.windowWidth,
              slideWidth: res.windowWidth * 0.7
            });
          }
        });
        //调用应用实例的方法获取全局数据
        app.getUserInfo(function(userInfo){
          //更新数据
          that.setData({
            userInfo:userInfo
          })
        })
        this.refresh();
      },
         //点击 侧栏展开
      ballClickEvent: function() {
        slideUp.call( this );
      },
      //遮罩点击  侧栏关闭
      slideCloseEvent: function() {
        slideDown.call( this );
      },
      upper: function () {
        wx.showNavigationBarLoading()
        this.refresh();
        console.log("upper");
        setTimeout(function(){wx.hideNavigationBarLoading();wx.stopPullDownRefresh();}, 2000);
      },
      lower: function (e) {
        wx.showNavigationBarLoading();
        var that = this;
        setTimeout(function(){wx.hideNavigationBarLoading();that.nextLoad();}, 1000);
        console.log("lower")
      },
      //scroll: function (e) {
      //  console.log("scroll")
      //},
     
      //网络请求数据, 实现首页刷新
      refresh0: function(){
        var index_api = '';
        util.getData(index_api)
            .then(function(data){
              //this.setData({
              //
              //});
              console.log(data);
            });
      },
     
      //使用本地 fake 数据实现刷新效果
      refresh: function(){
        var feed = util.getData2();
        console.log("loaddata");
        var feed_data = feed.data;
        this.setData({
          feed:feed_data,
          feed_length: feed_data.length
        });
      },
     
      //使用本地 fake 数据实现继续加载效果
      nextLoad: function(){
        var next = util.getNext();
        console.log("continueload");
        var next_data = next.data;
        this.setData({
          feed: this.data.feed.concat(next_data),
          feed_length: this.data.feed_length + next_data.length
        });
      }
     
     
    })
    //侧栏展开
    function slideUp() {
      var animation = wx.createAnimation( {
        duration: 600
      });
      this.setData( { maskDisplay: 'block' });
      animation.translateX( '100%' ).step();
      this.setData( {
        slideAnimation: animation.export()
      });
    }
     
    //侧栏关闭
    function slideDown() {
      var animation = wx.createAnimation( {
        duration: 600
      });
      animation.translateX( '-100%' ).step();
      this.setData( {
        slideAnimation: animation.export()
      });
      this.setData( { maskDisplay: 'none' });
    }





    游客,如果您要查看本帖隐藏内容请回复

    本帖子中包含更多资源

    您需要 登录 才可以下载或查看,没有帐号?立即注册

    x
    使用道具 举报 回复
    好的,谢谢。
    使用道具 举报 回复
    啥也不说了,感谢楼主分享哇!
    请问在哪下载呢
    学习一下
    使用道具 举报 回复
    谢谢分享!!
    使用道具 举报 回复
    我有流量,你有产品,我们就可以合作,有意的个人开发者朋友可以联系微信号jim20180688,详聊
    发新帖
    您需要登录后才可以回帖 登录 | 立即注册
    咫尺论坛|小程序开发社区
    X

    扫码添加专属客服即可随时咨询

    还可领取小程序推广攻略