微信小程序学习用demo推荐：知乎；侧边栏，tab，点击刷新

柿霖不是林

这里有一个侧边栏，仅供学习使用，并没有设计；侧边栏
也可以参考这个：
微信小程序学习demo推荐：侧边栏滑动特效；四种特效




[mw_shl_code=html,true]//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' });
}[/mw_shl_code]

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

tksinfo

好的，谢谢。

kingfang

啥也不说了，感谢楼主分享哇！

wtt_1012

请问在哪下载呢

zhangchao85gg

学习一下

sanxin8zhua

谢谢分享！！

jack56846

我有流量，你有产品，我们就可以合作，有意的个人开发者朋友可以联系微信号jim20180688，详聊

Rampant9

1111111111111111111111111