找回密码
 立即注册

扫一扫,访问微社区

查看: 9813|回复: 7

微信小程序学习用demo推荐:知乎;侧边栏,tab,点击刷新

  [复制链接]
发表于 2017-1-19 13:21:53 | 显示全部楼层 |阅读模式
这里有一个侧边栏,仅供学习使用,并没有设计;侧边栏
也可以参考这个:
微信小程序学习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]




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

本帖子中包含更多资源

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

×

0

主题

9

回帖

31

金钱

新人求带

积分
0
发表于 2017-2-6 22:11:08 | 显示全部楼层
好的,谢谢。
回复

使用道具 举报

0

主题

5

回帖

47

金钱

新人求带

积分
0
发表于 2017-2-7 15:31:28 | 显示全部楼层
啥也不说了,感谢楼主分享哇!

0

主题

2

回帖

29

金钱

新人求带

积分
0
发表于 2017-2-8 17:20:53 | 显示全部楼层
请问在哪下载呢

0

主题

2

回帖

14

金钱

新人求带

积分
0
发表于 2017-7-27 21:22:36 | 显示全部楼层
学习一下
回复

使用道具 举报

0

主题

3

回帖

54

金钱

新人求带

积分
0
发表于 2018-5-13 03:38:52 | 显示全部楼层
谢谢分享!!
回复

使用道具 举报

0

主题

408

回帖

600

金钱

新人求带

积分
0
发表于 2020-4-8 15:55:21 | 显示全部楼层
我有流量,你有产品,我们就可以合作,有意的个人开发者朋友可以联系微信号jim20180688,详聊

0

主题

18

回帖

2

金钱

新人求带

积分
0
发表于 2021-6-3 22:27:03 | 显示全部楼层
1111111111111111111111111
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|手机版|小黑屋|微信小程序开发|教程|文档|资源汇总_即速论坛 ( 粤ICP备14097199号-1  

GMT+8, 2024-3-29 21:23 , Processed in 0.122402 second(s), 31 queries .

Powered by Discuz! X3.5

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表