精华内容
下载资源
问答
  • 微信小程序局部刷新

    千次阅读 2018-10-19 18:14:01
    #小程序局部刷新Demo 第一次发微博就发个跟小程序相关的吧。记得我自学小程序的时候是2017年,当时公司要求开发一个家政类型的小程序,可我双眼一抹黑啊,对小程序啥都不懂,于是就去翻微信官方文档,亏得我天赋异禀...

    #小程序局部刷新Demo

    第一次发微博就发个跟小程序相关的吧。记得我自学小程序的时候是2017年,当时公司要求开发一个家政类型的小程序,可我双眼一抹黑啊,对小程序啥都不懂,于是就去翻微信官方文档,亏得我天赋异禀、智慧超凡(哈哈哈~~你们都懂的我就是吹一吹),我带着有趣的眼神以及深厚的兴趣边学边做,怎料到,才一个星期我就把公司要求的小程序给做出来了。唉。。。造化弄人呐,当然我的第一个小程序很简单。行了,不瞎BB,搬砖走起。

    #新建一个小程序Demo

    新建一个小程序,具体的步骤大家应该都知道,我就不写了。先把页面给做出来,以下是代码截图和页面截图

    <!--pages/hotSearch/index.wxml-->
    <view class='page'>
      <view class='page__hd'>
        <form bindsubmit='searchSubmit'>
          <view class="hd-sch">
            <view class="sch-box weui-cell weui-cell_select weui-cell_select-before">
              <view class="weui-cell__hd">
                <image class='sch-img' src='/logos/otherimgs/search_selected.png'></image>
              </view>
              <view class="weui-cell__bd">
                <input class="weui-input" name="addressName" placeholder="请输入地名" />
              </view>
              <view class="weui-cell__ft">
                <button formType="submit" class='sch-txt'>搜 索</button>
                <image class='right-img' src='/logos/otherimgs/img_blue_mark.png'></image>
              </view>
            </view>
          </view>
        </form>
      </view>
      <view class='page__bd'>
        <view class="weui-cell weui-cell_access js_item hot-sch">
          <view class="weui-cell__bd sch-tit">
            <image class='local-img' src='/logos/otherimgs/localposition.png'></image>
            <text style='font-size:34rpx;color:#333;'>热门</text>
          </view>
          <view class="weui-cell__ft"></view>
        </view>
        <view class='weui-grids'>
          <view class='weui-grid grid-btn'>
            <view data-id='0' class="{{hotId==0?'grid-checked':'grid-text'}}" catchtap='checkHot'>不限</view>
          </view>
          <view class='weui-grid grid-btn' wx:for="{{addressList}}" wx:key="{{item.id}}">
            <view class="{{item.id===hotId?'grid-checked':'grid-text'}}" data-id="{{item.id}}" catchtap='checkHot'>{{item.name}}</view>
          </view>
        </view>
      </view>
    
      <view class='page__bd'>
        <view class="weui-cell weui-cell_access js_item hot-sch">
          <view class="weui-cell__bd sch-tit">
            <image class='local-img' src='/logos/otherimgs/localposition.png'></image>
            <text style='font-size:34rpx;color:#333;'>历史搜索</text>
          </view>
          <view class="weui-cell__ft"></view>
        </view>
        <view class='weui-grids'>
          <view class='weui-grid grid-btn' wx:for="{{addressList}}" wx:key="{{item.id}}">
            <view class="{{item.id===historyId?'grid-checked':'grid-text'}}" data-id="{{item.id}}" catchtap='checkHistory'>{{item.name}}</view>
          </view>
        </view>
      </view>
    
    </view>
    <!---------------------------------------------------------------------------------------->
    /*以下是css代码*/
    /* pages/hotSearch/index.wxss */
    .page{
      padding: 10rpx 20rpx;
    }
    .hd-sch{
      background: #fff;
      border-radius: 12rpx;
      padding: 10rpx 0;
    }
    .sch-box{
      padding: 0 0 0 20rpx;
    }
    .sch-img{
      width: 36rpx;
      height: 36rpx;
    }
    .weui-cell__ft{
      position: relative;
      width: 170rpx;
      display: flex;
    }
    .right-img{
      width: 170rpx;
      height: 80rpx;
    }
    .sch-txt{
      position: absolute;
      right: 0;
      left: 0;
      margin: auto;
      color: #fff;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding-bottom: 4rpx;
      font-size: 32rpx;
    }
    button{
      background: rgba(0,0,0,0);
      border: none;
      outline: none;
    }
    .local-img{
      width: 34rpx;
      height: 34rpx;
      padding-right: 20rpx;
    }
    .sch-tit{
      display: flex;
      align-items: center;
      width: 100%;
    }
    .hot-sch{
      border-bottom: 2rpx solid #e8e8e8;
      margin-bottom: 20rpx;
    }
    .weui-grid{
      border: none;
      text-align: center;
    }
    .grid-btn{
      padding: 10rpx 0rpx!important;
    }
    .weui-grids{
      border: none;
    }
    .grid-text{
      width: 92%;
      border-radius: 8rpx;
      border: 2rpx solid #ccc;
      padding:10rpx 0rpx;
    }
    .grid-checked{
        width: 92%;
      border-radius: 8rpx;
      border: 2rpx solid rgb(29,130,210);
      color: rgb(29,130,210);
      padding:10rpx 0rpx;
    }
    .page__bd{
      padding: 20rpx;
      background: #fff;
      box-shadow: 0 0 20rpx #ccc;
      border-radius: 12rpx;
      margin-top: 20rpx;
    }
    <!---------------------------------------------------------------------------------------->
    /*以下是js代码*/
    // pages/hotSearch/index.js
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        hotId: 0,
        historyId: 0,
        addressList: [{ id: 1, name: '江西' }, { id: 2, name: '江苏' }, { id: 3, name: '安徽' }, { id: 4, name: '上海' }, { id: 5, name: '重庆' }, { id: 6, name: '北京' }, { id: 7, name: '杭州' }, { id: 8, name: '宁波' }, { id: 9, name: '舟山' }, { id: 10, name: '连云港' }],
        addressList: [{ id: 1, name: '江西' }, { id: 2, name: '江苏' }, { id: 3, name: '安徽' }, { id: 4, name: '上海' }, { id: 5, name: '重庆' }, { id: 6, name: '北京' }, { id: 7, name: '杭州' }, { id: 8, name: '宁波' }, { id: 9, name: '舟山' }, { id: 10, name: '连云港' }]
      },
      
      //搜索
      searchSubmit(e) {
        console.log('搜索', e)
      },
      
      //点击热搜
      checkHot(e) {
        console.log('选择', e)//获取点击项的内容(在xhml里面用data-id='item.id'绑定下id,这里点击的时候就会获取到id)
        this.setData({
          hotId: e.currentTarget.dataset.id//记录下点击的热搜id
        })
      },
      
      //点击历史
      checkHistory(e) {
        console.log('选择', e)//获取点击项的内容(在xhml里面用data-id='item.id'绑定下id,这里点击的时候就会获取到id)
        this.setData({
          historyId: e.currentTarget.dataset.id//记录下点击的历史ID
        })
      }
    })
    

    !(在这里插入图片描述在这里插入图片描述

    以及是实现的效果图,可以用此操作来实现局部刷新,小程序上的点赞效果同理。我知道我很牛逼,但是你们可以不用告诉我,第一次写博客,不是很详细请见谅。日后有新见解会持续更新,望大家给个关注的小心心~~~~~♥(ˆ◡ˆԅ)~~~~我感觉我快要飞起来了。
    博客IDID:qq_39024950;
    我的QQ:510169899;

    展开全文
  • 微信小程序页面刷新,下拉刷新

    万次阅读 2018-05-07 08:58:35
    最近做项目的时候略微研究了一下微信小程序的页面刷新机制.微信小程序刷新类似于Ajax的刷新,可以通过setData实现部分页面的刷新,并不需要onLoad页面.当然,微信小程序并没有类似于网页或者Android的页面重载方法....

    最近做项目的时候略微研究了一下微信小程序的页面刷新机制.

    微信小程序的刷新类似于Ajax的刷新,可以通过setData实现部分页面的刷新,并不需要onLoad页面.

    当然,微信小程序并没有类似于网页或者Android的页面重载方法.

    刷新页面只能通过setData或者使用官方提供的下拉刷新.

    1.使用setData

    this.setData({
    shop_list: new_shop_list
    })


    2.使用下拉刷新

    a.首先在index.json里设置

    {
    //开启下拉刷新
      "enablePullDownRefresh": true,
      //设置页面颜色(设置颜色才可以看到下拉刷新的动画效果)  
    "backgroundTextStyle": "dark"
    }


    b.在index.js中的onPullDownRefresh 方法中写刷新的逻辑代码

    /**
    * 页面相关事件处理函数--监听用户下拉动作
    */
    onPullDownRefresh: function () {

        //当逻辑执行完后关闭刷新    
        wx.stopPullDownRefresh()
    },


    c.效果实现


    展开全文
  • 微信小程序刷新页面

    千次阅读 2019-03-04 16:58:37
    平时作小程序开发时候会遇到一些刷新页面的问题,下面就一起来看一下。

    平时作小程序开发时候会遇到一些刷新页面的问题,下面就一起来看一下。

    因为小程序本身不存在刷新页面,
    所以大家在进行删除、重命名、调取后台数据时,想实现页面的重新加载,
    就要去执行下onLoad函数重新渲染。

       已删除为例
     //删除
      delete:function(e){
        var that=this;
        var id = e.currentTarget.dataset.id // 当前点击的id
        wx.showModal({  // 提示框
          title: '提示',
          content: '确定删除吗',
          success:function(res){
            if(res.confirm){
              myConsult.getDelete(id, (res) => {
                console.log(res)
                if(res.code==201){
                  that.setData({ pageIndex: 1, doctorArr: [] });//   重点
                  that.onLoad()//重点   重新执行下onLoad去获取当前的数据
                }
              });
            }
          }
        });
      }
    
    展开全文
  • 微信小程序下拉刷新/上拉加载更多

    万次阅读 多人点赞 2017-12-19 09:37:50
    小程序里,用户顶部下拉是默认禁止的,我们需要把他设置为启用,在app.json中的设置对所有页面有效,在单独页面设置则对当前页面有效; 看一下json文件 "enablePullDownRefresh": true, 注意这里的true是...

    查看文档,在用page()函数注册页面的时候有这样的两个对象参数用户判断用户在最顶部下拉到达最底部,

    在小程序里,用户顶部下拉是默认禁止的,我们需要把他设置为启用,在app.json中的设置对所有页面有效,在单独页面设置则对当前页面有效;

    看一下json文件

     

    "enablePullDownRefresh": true,


    注意这里的true是布尔型而不是字符;

     

    有同学说设置完之后可以下拉,但是看不到图标;

    在app.json中这样设置;

    这样下拉之后就可以看到了;

    每个页面生成的时候已经默认为我们设置了前面提到的onPullDownRefresh函数和onReachBottom函数

    直接上代码:

    page为全局变量,用在在后面的加载请求,这里要和编写数据接口的同事讨论好请求;

     

     // 下拉刷新
      onPullDownRefresh: function () {
        // 显示顶部刷新图标
        wx.showNavigationBarLoading();
        var that = this;
        wx.request({
          url: 'https://xxx/?page=0',
          method: "GET",
          header: {
            'content-type': 'application/text'
          },
          success: function (res) {
            that.setData({
              moment: res.data.data
            });
            console.log(that.data.moment);
            // 隐藏导航栏加载框
            wx.hideNavigationBarLoading();
            // 停止下拉动作
            wx.stopPullDownRefresh();
          }
        })
      },

     

    上拉加载更多:

     

     

    /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
        var that = this;
        // 显示加载图标
        wx.showLoading({
          title: '玩命加载中',
        })
        // 页数+1
        page = page + 1;
        wx.request({
          url: 'https://xxx/?page=' + page,
          method: "GET",
          // 请求头部
          header: {
            'content-type': 'application/text'
          },
          success: function (res) {
            // 回调函数
            var moment_list = that.data.moment;
            const oldData = that.data.moment;
            that.setData({
               moment:oldData.concat(res.data.data)
            })
            // 隐藏加载框
            wx.hideLoading();
          }
        })
    
      },

    完成。

    推荐一下自己的小程序 有兴趣可以交流

     



     

     

    展开全文
  • 小程序刷新重置当前页面

    万次阅读 2018-08-21 15:20:27
    小程序开发过程中遇到提交表单,当表单提交完成后重置当前页面,因此需要用到刷新当前页面,关键代码如下: if (getCurrentPages().length != 0) { //刷新当前页面的数据 getCurrentPages()[getCurrentPages()...
  • 在微信小程序中想要实现下拉刷新,是很方便的。但是如何使用,在文档上找起来却不是很方便。话不多说,直接上文档截图 很明显,enablePullDownRefresh 这个属性设置为true。就默认开启了下拉刷新。...
  • 小程序刷新页面

    千次阅读 2018-09-19 13:58:03
    场景值:页面有弹层输入框,输入之后,重新请求页面数据,即相当于是刷新按钮。 解决办法: this.onLoad() this.onShow()
  • 小程序下拉刷新

    千次阅读 2018-07-20 11:51:58
    所以想要触发刷新时,也可以在添加信息后,触发下拉 wx.startPullDownRefresh(); 实现刷新的目的。 当然是先目的后关闭下拉: wx.stopPullDownRefresh() 在这些之前,要在app.json中开启下拉: "window...
  • 微信小程序下拉刷新

    2018-01-22 16:50:41
    今天研究了一下小程序刷新的相关知识,我的需求UI如图所示(点击类目一,类目二刷新列表数据,类目固定在顶部不能滚动,只能滚动列表内容,底部是小程序首页的tab,先要使用微信自带的接口实现下拉刷新): ...
  • 由于小程序没有提供与webview的实时通信能力,因此刷新页面是个可考虑的做法。 方法一 最常见的做法,修改一下webview的url,加点query参数什么的,页面就会更新了。但是这会增加webview的浏览history,导致用户在.....
  • 微信小程序自定义下拉刷新

    千次阅读 2019-06-10 14:20:40
    微信小程序手把手教你实现自定义下拉刷新前言思路分析实现尾巴 前言 在上一篇文章:微信小程序手把手教你实现类似Android中ViewPager控件效果,通过这篇文章我们实现了跟android开发中ViewPager+Fragment类似的效果...
  • 项目需求,在微信小程序首页的 banner 图,打开公司官网,这个功能很好实现,就是专门整个 webview 组件所在页面,以后凡是有这种需求的都跳转到这个页面,只需要切换不同的路由地址就行了,可是最近出现了一个问题...
  • 开发微信小程序时,经常会用到刷新列表或者信息,这时一般分为两种情况,一种为触底刷新,即页面翻滚到最底部触发刷新动作;一种为局部触底刷新,即页面翻滚到一定高度时触发刷新动作 第一种触底刷新,微信小程序...
  • 微信小程序 实现下拉刷新

    千次阅读 2018-09-24 16:58:29
    下面博主将会为大家讲解下拉刷新的操作,最后附上源码! 以下是微信小程序项目源码:点击可以...微信小程序演示程序 版权所有,禁止转载,违者必究。 喜欢的朋友可以点赞评论喔,您的支持是我更新最大的动力~ ...
  • 小程序下拉刷新的实现

    千次阅读 2019-04-22 17:05:58
    小程序下拉刷新 1.使用onPullDownRefresh()这个方法来实现下拉刷新 例子如下: // 页面下拉刷新 onPullDownRefresh() { this.loadSwiper();//需要再次调用接口的函数 }, 注意事项:需要将要加载的函数在...
  • 微信小程序刷新webview页面问题

    万次阅读 2018-03-09 17:41:47
    比着原生的小程序页面来说,方便了不少,但是刷新是个问题。这里记录一下刷新的方法。 二、微信小程序的生命周期函数 生命周期函数 onLoad: 页面加载 一个页面只会调用一次。 接收页面参数可以获取wx.navi...
  • 小程序定时刷新

    千次阅读 2019-08-12 11:38:44
    var interval; 在 onLoad: function()里面加 /** * 生命周期函数--监听页面加载 */ onLoad: function(options) { var that = this; interval = setInterval(function() { that.getMyCommune();... conso...
  • 微信小程序 webview 页面刷新

    千次阅读 2019-01-15 08:58:57
    微信小程序 webview 页面刷新 问题描述 在微信小程序原生页面做了操作,数据发生改变,回到 webview 页面时需要更新 webview 里面的数据。由于小程序没有提供与 webview 的实时通信能力,因此刷新页面是个可考虑的...
  • 微信小程序scroll-view下拉刷新(附带下拉刷新效果) 使用说明 https://blog.csdn.net/u012308481/article/details/102619511
  • 微信小程序提供了原声的下拉刷新,三个小点的下拉刷新。 在.json 中写 { "enablePullDownRefresh": true, //开启下拉刷新 "backgroundTextStyle": "dark" //设置小点为深色 } 在.js中写 onPullDownRefresh:...
  • 微信小程序实战篇-下拉刷新与加载更多

    万次阅读 多人点赞 2017-06-17 10:59:19
    哈喽,大家好,看这标题是不是有点奇怪,你们期盼的微信小程序实战篇-电商(三)没出现,我是这么想的,因为电商里面的内容有很多,如何我只是以一二三那样命名的话,不方便你们查看每篇文章讲解的内容,所以我就换...
  • 小程序组件页面刷新问题

    万次阅读 2018-09-13 18:26:55
    1.A页面点击跳转到B页面,在B页面操作后A页面应该发生变化,但是实际上我们点击返回的时候我们发现并没有刷新,通过小程序的生命周期函数由onLoad(页面加载)、onReady(页面初次渲染完成)、onShow(页面显示)、...
  • 为了提升小程序的用户体验 ,下来刷新列表图片可以用懒加载的,分页加载用concat 添加,我个人用的方法是每请求一页数据就增加一个数组,用来存放获取到的数据,这样setData重新更新数据的时候就只需要更新一组数据...
  • 小程序刷新页面更新数据

    千次阅读 2020-06-09 11:46:36
    微信小程序刷新页面更新数据 小程序刷新页面过程大家都懂得,特别是网络不好的时候,觉得这te,ma,就是一种折磨,如何做到不刷新页面就可以更新数据? 页面栈: 小程序的每一个页面都是一个page对象,一个小程序...
  • uniapp小程序当前页面刷新

    千次阅读 2021-02-01 16:37:58
    最近用uniapp开发小程序就遇到了个神坑,当前项目需求是点击投票之后在重新请求获取接口最新数据,刷新当前页面, 然而我用了微信原生方法,在点击投票后调用this.onload()钩子函数,发现报错 this.onload not is ...
  • 微信小程序 页面刷新

    2019-12-13 16:01:29
    这里只写了我用到的方法。 1. 当前页面刷新 //获取页码数进行刷新 const pages = getCurrentPages() const perpage = pages[pages.length - 1] perpage.onLoad() ...//获取页码数进行刷新,跟当前页面的刷新...
  • 微信小程序自定义 下拉刷新

    千次阅读 2018-12-05 22:05:47
    微信小程序自定义 下拉刷新 因为自定义BarTitle 的原因,小程序自带的下拉刷新,对整个 page 中的内容都会有移动,只能自己写了;找了一些实现的方法,基本都是使用 scroll-view 去实现的,但是没有见到过源码;把...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 299,890
精华内容 119,956
关键字:

怎样刷新小程序