精华内容
下载资源
问答
  • 微信小程序实时刷新
    2022-06-24 23:14:37
    //刷新当前页面.
    reloadThisPage() {
       let currentPages = getCurrentPages()
       let lastRoute = currentPages[currentPages.length - 1].route
       let options = currentPages[currentPages.length - 1].options
       let optionsStr = "?"
       for (let key in options) {
          optionsStr += '&' + key + '=' + options[key]
       }
    
       wx.redirectTo({
          url: '/' + lastRoute + optionsStr,
       })
    },
    更多相关内容
  • 微信小程序 下拉刷新,tab切换 (源码)微信小程序 下拉刷新,tab切换 (源码)微信小程序 下拉刷新,tab切换 (源码)微信小程序 下拉刷新,tab切换 (源码)微信小程序 下拉刷新,tab切换 (源码)微信小程序 下拉刷新,tab...
  • 主要介绍了微信小程序如何刷新当前界面的实现方法,文中通过示例代码介绍的非常详细,对大家学习或者使用小程序具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
  • 主要介绍了微信小程序局部刷新触发整页刷新效果的实现代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 微信小程序启动刷新

    2021-03-29 17:58:08
    最近写公司的一个微信小程序遇到了一个小问题,就是由于微信小程序自己的运行机制小程序不会主动被微信注销导致的小程序不会在你退出小程序界面后自动unload,从微信小程序官方文档上可以看到: (此图片来源于网络,...
  • 主要介绍了微信小程序下拉刷新界面的实现的相关资料,希望通过本文能帮助到大家实现这样的功能,需要的朋友可以参考下
  • 基于小程序原生组件scroll-view的扩展与封装,实现简单的上拉加载下拉刷新 扩展下拉刷新动画,有灵感的朋友可以丰富更多下拉动画 在线征集 在线征集下拉刷新动画创意,你可以发草图,或者psd,AE等文件到邮箱:. 只要...
  • 主要为大家详细介绍了微信小程序动画实现下拉刷新动画,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 本文实例为大家分享了微信小程序实现列表下拉刷新上拉加载的具体代码,供大家参考,具体内容如下 DEMO下载 效果图 原理 利用微信小程序的onPullDownRefresh函数(下拉刷新监听函数)和onReachBottom函数(上拉加载...
  • 主要给大家介绍了关于微信小程序下拉刷新PullDownRefresh的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 微信小程序 列表刷新:  微信小程序,最近自己学习微信小程序的知识,就想实现现在APP 那种列表刷新,下拉刷新,上拉加载等功能。  先开看一下界面 1.wx.request (获取远程服务器的数据,可以理解成$.ajax) 2....
  • 微信小程序 上拉下拉不会断详细介绍 最开始看到效果图,不错,第一想到的是用做的,添加浮动层,然后设置浮动层高度。其实不然,大牛是”enablePullDownRefresh”: “true”后,在页面添加遮掩层,并跟随底部滑动...
  • 这篇文章主要介绍了微信小程序返回上一页传参并刷新过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 问题 微信小程序onLoad(options)方法在整个生命...
  • 主要介绍了微信小程序tabBar 返回tabBar不刷新页面,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • 微信小程序下拉刷新上拉加载的两种实现方法 实现效果图: 方法一:onPullDownRefresh和onReachBottom方法实现小程序下拉加载和上拉刷新 首先要在json文件里设置window属性  属性  类型  描述 ...
  • 关于微信小程序如何刷新当前页面

    千次阅读 2021-05-08 11:05:33
    考虑到触发刷新的地方很多,如果把每一个的上下文都传进来,调用上下文的onLoad方法,太过复杂,如果是组件层层嵌套那就没法玩了。 最后思路其实很简单就是把最后的一个路由拿出来,重新加载一遍。 // 全局可用 ...

    考虑到触发刷新的地方很多,如果把每一个的上下文都传进来,调用上下文的onLoad方法,太过复杂,如果是组件层层嵌套那就没法玩了。

    最后思路其实很简单就是把最后的一个路由拿出来,重新加载一遍。

    // 全局可用
    function reloadThisPage() {
        let currentPages = getCurrentPages()
        let lastRoute = currentPages[currentPages.length - 1].route
        let options = currentPages[currentPages.length - 1].options
        let optionsStr = ""
        for (let key in options) {
            optionsStr += '?' + key + '=' + options[key]
        }
        wx.redirectTo({
            url: '/' + lastRoute + optionsStr,
        })
    }
    
    展开全文
  • 微信小程序中的下拉刷新,上拉加载的功能很常见,目前我知道的有两种可行的方法,一是scroll-view,二是整个页面刷新.今天说说第一种,自己造轮子,难免有些瑕疵,日后慢慢完善. 上gif: 原理: scroll-view中有监听滑动的...
  • 微信小程序中想要实现下拉刷新,是很方便的。但是如何使用,在文档上找起来却不是很方便。话不多说,直接上文档截图 (此图片来源于网络,如有侵权,请联系删除! )   很明显,enablePullDownRefresh 这个属性设置...
  • 小程序页面集成了下拉功能,并提供了接口,我们只需要一些配置就可以拿到事件的回调。 需要在 .json 文件中配置。 如果配置在app.json文件中,那么整个程序都可以下拉刷新。如果写在具体页面的.json文件中,那么就是...
  • 微信小程序实现Echarts图的动态实时刷新

    万次阅读 多人点赞 2020-12-24 20:44:45
    微信小程序绘制折线图时,选择Echarts。官网如下:https://echarts.apache.org/zh/index.html 微信小程序中的应用,就看在微信小程序中使用Echarts。 主要就是拷贝 ec-canvas 目录到新建的小程序项目下,然后做...

    在微信小程序绘制折线图时,选择Echarts。官网如下:https://echarts.apache.org/zh/index.html
    效果如下:(由于为截取动态图,只有实时图片结果)
    在这里插入图片描述

    微信小程序中的应用,就看在微信小程序中使用Echarts。
    在这里插入图片描述主要就是拷贝 ec-canvas 目录到新建的小程序项目下,然后做相应的调整。

    github链接如下:https://github.com/ecomfe/echarts-for-weixin

    然后正式开始在小程序中使用Echarts。我的需求是绘制温度随时间变化的折线图,温度和时间从服务器中获取,因为数据是实时刷新的,我们是10秒刷新一次数据,因此我想让折线图也动态实时刷新,于是设置刷新时间,不断刷新从服务起取数据,进而不断重新绘制图形,达到实时刷新的效果。

    1.引入Echarts

    (1)将ec-canvas文件拷贝下来放到你自己的项目中:
    在这里插入图片描述
    (2)在你需要使用Echarts的页面的json文件中引入Echarts

    {
      "usingComponents": {
        "ec-canvas": "../../ec-canvas/ec-canvas"
      }
    }
    

    2.使用Echarts

    在需要显示图表的页面的wxml中使用Echarts。

    <view class="containera">
      <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
    </view>
    

    在wxss设置宽度和高度

    ec-canvas {
      width: 100%;
      height: 100%;
    }
    

    注:如果页面有多张图表时,要调整高度。

    3.js页面设置Echarts以及动态刷新

    现在是最重要的js交互代码。
    (1)先引入:如官网所述,找到对应的文件夹。

    import * as echarts from '../../ec-canvas/echarts';
    

    (2)设置图的格式。这里我使用的是折线图。

    我这里是想要画温度随时间变化的折线图。x轴数据和y轴数据是从服务器中取出来的。

    function line_set(chart, xdata, ydata) { //xdata, ydata分别表示x轴数据和y轴数据
      var option = {
      // 设置图的title、xAxis、yAxis
        title: {
          text: '温度随时间变化图',
          left: 'center'
        },
        color: ["#37A2DA", "#67E0E3", "#9FE6B8"],
        
        grid: {
          containLabel: true
        },
        tooltip: {
          show: true,
          trigger: 'axis'
        },
        xAxis: {
          name:'日期',
          axisLabel: {  //因为日期太长,显示不全,于是让横坐标斜着显示出来
            interval:0,  
            rotate:40  
         } ,
          type: 'category',
          boundaryGap: false,
          data: xdata,  //xdata是服务器读取的数据
        },
        yAxis: {
          name:'温度/℃',
          x: 'center',
          type: 'value',
          splitNumber:5,
          min: 30,
          max: 40,
          splitLine: {
            lineStyle: {
              type: 'dashed'
            }
          }
      
        },
        series: [{
          name: '温度',
          type: 'line',
          smooth: true,
          data: ydata  // ydata也是服务器取出来的数据
        }]
      };
      chart.setOption(option);
    }
    

    设置page中的数据:

    data设置图表的ec,以及动态刷新的时间间隔

    data: {
       
        ec: {
          lazyLoad: true
        },
        timer:''
      },
    

    onload函数设置调用的函数,以及设置动态刷新的函数

    onLoad: function (options) {
        var _this = this;
        this.getOption();
        this.setData({                    //每隔10s刷新一次
          timer: setInterval(function () {
            _this.getOption();
        }, 10000)
        })
      },
    

    对应的wxml中的ec-canvas id

    onReady: function () {
        this.oneComponent = this.selectComponent('#mychart-dom-bar'); 
      },
    

    初始化图表:

    init_chart: function (xdata, ydata) {           //初始化图表
        this.oneComponent.init((canvas, width, height, dpr) => {
            const chart = echarts.init(canvas, null, {
                width: width,
                height: height,
                devicePixelRatio: dpr // new
            });
            line_set(chart, xdata, ydata)
            this.chart = chart;
            return chart;
        });
    },
    

    从服务器接口中读取数据:

    getOption: function () {        
      var _this = this;
      wx.request({
          url: 'https://*******/',    //你请求数据的接口地址
          method: 'GET',
          header: {
              "Content-Type": "application/json"
          },
          success: function (res) {
            console.log(res);
            _this.setData({      
              //将接口返回的数据data赋值给data
              data:res.data,     
            })
            //将读取的数据直接存储到list中,可以直接使用
            var temperature=[];
            var date=[];
            for (var i = 0; i < res.data.length; ++i) {
                temperature[i]=res.data[i].temperature;
                date[i]=res.data[i].date;
             }
            _this.init_chart(date,temperature)             
         },      
      })  
    },
    

    完整代码如下:

    import * as echarts from '../../ec-canvas/echarts';
    
    
    function line_set(chart, xdata, ydata) {
    
      var option = {
        title: {
          text: '温度随时间变化图',
          left: 'center'
        },
        color: ["#37A2DA", "#67E0E3", "#9FE6B8"],
        
        grid: {
          containLabel: true
        },
        tooltip: {
          show: true,
          trigger: 'axis'
        },
        xAxis: {
          name:'日期',
          axisLabel: {  
            interval:0,  
            rotate:40  
         } ,
          type: 'category',
          boundaryGap: false,
          data: xdata,
          // show: false
        },
        yAxis: {
          name:'温度/℃',
          x: 'center',
          type: 'value',
          splitNumber:5,
          min: 30,
          max: 40,
          splitLine: {
            lineStyle: {
              type: 'dashed'
            }
          }
          // show: false
        },
        series: [{
          name: '温度',
          type: 'line',
          smooth: true,
          data: ydata
        }]
      };
      chart.setOption(option);
    }
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
       
        ec: {
          lazyLoad: true
        },
        timer:''
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        var _this = this;
        this.getOption();
        this.setData({                    //每隔10s刷新一次
          timer: setInterval(function () {
            _this.getOption();
        }, 10000)
        })
      },
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
        this.oneComponent = this.selectComponent('#mychart-dom-bar');
     
      },
      onUnload: function () {
        clearInterval(this.data.timer)
    },
      init_chart: function (xdata, ydata) {           //初始化第一个图表
        this.oneComponent.init((canvas, width, height, dpr) => {
            const chart = echarts.init(canvas, null, {
                width: width,
                height: height,
                devicePixelRatio: dpr // new
            });
            line_set(chart, xdata, ydata)
            this.chart = chart;
            return chart;
        });
    },
    getOption: function () {        
      var _this = this;
      wx.request({
          url: 'https://******/',    //你请求数据的接口地址
          method: 'GET',
          header: {
              "Content-Type": "application/json"
          },
          success: function (res) {
            console.log(res);
            _this.setData({      
              //将接口返回的数据data赋值给data
              data:res.data,     
            })
            var temperature=[];
            var date=[];
            for (var i = 0; i < res.data.length; ++i) {
                temperature[i]=res.data[i].temperature;
                date[i]=res.data[i].date;
             }
            _this.init_chart(date,temperature)           
          },   
      })  
    },
    

    这样就实现了实时动态刷新的效果,每隔10s重新画图。

    希望对看到这篇博客的人有帮助。

    展开全文
  • 一分钟教你学会微信小程序的页面刷新 微信开放文档下拉刷新 1. 开始刷新 wx.startPullDownRefresh() 代码实现(在onLoad中写开始刷新) onLoad: function (options) { //刷新 wx.startPullDownRefresh() } 2....

    群聊(项目源码)

    在这里插入图片描述

    一分钟教你学会微信小程序的页面刷新

    微信开放文档下拉刷新

    1. 开始刷新

    wx.startPullDownRefresh()
    代码实现(在onLoad中写开始刷新)

    onLoad: function (options) {
        //刷新
        wx.startPullDownRefresh()
        }
    

    2.刷新界面的提示

    在请求数据库的方法中加入这个提示

    getShop(){ //构造的请求数据库的方法
      wx.showLoading({
        title: '加载中....',
      })
        //请求数据库
      wx.cloud.database().collection('electric')
      .get()
      .then(res=>{
        wx.hideLoading()
        //停止数据刷新
        wx.stopPullDownRefresh()
        this.setData({
          list:res.data
        })
      })
      .catch(res=>{
        console.log('失败')
      })
    
    },
    

    3.结束刷新

    wx.stopPullDownRefresh()
    在数据库请求到数据后开始隐藏刷新提示,并且结束刷新。

     .then(res=>{
        wx.hideLoading()
        //停止数据刷新
        wx.stopPullDownRefresh()
        this.setData({
          list:res.data
        })
      })
    

    4.下拉刷新监听

    onPullDownRefresh: function () {
      this.getShop()//请求数据库的方法
      this.getShiwu()
    },
    
    

    5.下拉刷新的样式设计

    代码写在这里
    在这里插入图片描述
    代码实现

    {
      "usingComponents": {},
      "enablePullDownRefresh": true,
      "backgroundColor": "#d3d3d3"
    }
    

    6.总结
    下拉刷新主要是调用API接口,通过wx.startPullDownRefresh()和wx.stopPullDownRefresh()方法来实现下拉刷新的功能。
    **

    大家可以关注我的公众号,里面有更多的小程序项目

    **
    在这里插入图片描述

    展开全文
  • 最近在写微信小程序遇到了图表相关的问题,项目要求是要用柱状图,同时由于数据较多,需要将一组数据用多个图表表示,而且还要实现动态刷新数据。 关于echarts的下载和引入不多加介绍。 效果图 这里只取一部分数据做...
  • 微信小程序下拉刷新

    千次阅读 2022-01-19 16:57:08
    一、如何设置微信小程序所有页面都可以下拉刷新呢? 1、在app.json的"window"中进行配置 (1)把"backgroundTextStyle":“light"改为"backgroundTextStyle”:“dark” (2)添加"enablePullDownRefresh":true,开启...
  • 通过webpack编译构建微信小程序 使用 创建微信小程序时,将目录设到build/src下,本地的开发目录在src下 编译构建: $ npm run build 监听变化并重新编译 $ npm run watch 注意开发者工具上需要ctrl R(command R)...
  • 引入util.js var util=require('../../utils/util'); Page({ /** * 页面的初始数据 */ data: { Time:'' }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { ... that.setData({
  • 这篇文章主要介绍了微信小程序 下拉刷新及上拉加载实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1.下拉刷新的概念及应用场景。 概念: 下拉刷新是...
  • 微信小程序列表下拉刷新加载更多微信小程序列表下拉刷新加载更多微信小程序列表下拉刷新加载更多

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 33,512
精华内容 13,404
热门标签
关键字:

微信小程序实时刷新