咫尺论坛 › 微信小程序开发教程 › 微信小程序学习用demo推荐：知乎；侧边栏，tab，点击刷新

柿霖不是林 发表于 2017-1-19 13:21:53

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

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




//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' });
}




**** Hidden Message *****

tksinfo 发表于 2017-2-6 22:11:08

好的，谢谢。

kingfang 发表于 2017-2-7 15:31:28

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

wtt_1012 发表于 2017-2-8 17:20:53

请问在哪下载呢

zhangchao85gg 发表于 2017-7-27 21:22:36

学习一下

sanxin8zhua 发表于 2018-5-13 03:38:52

谢谢分享！！

jack56846 发表于 2020-4-8 15:55:21

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

Rampant9 发表于 2021-6-3 22:27:03

1111111111111111111111111

查看完整版本: 微信小程序学习用demo推荐：知乎；侧边栏，tab，点击刷新