精华内容
下载资源
问答
  • 微信小程序----返回上一页刷新或当前页刷新

    万次阅读 多人点赞 2018-04-05 19:11:49
    ... 1,reload()方法刷新当前页面; 2,replace() 方法刷新当前页面; ... 3,页面自动刷新当前页面;... 三种实现js 刷新当前... 1,在实现效果之前,需要知道微信小程序的页面生命周期,不是很清楚的可以看微信小程序

    WXRUI体验二维码

    WXRUI体验码

    如果文章对你有帮助的话,请打开微信扫一下二维码,点击一下广告,支持一下作者!谢谢!

    声明

    bug: 在onShow中执行this.onLoad(),会导致页面第一次加载的时候数组加载两次!
    造成原因:页面加载先执行onLoad,再执行的onShow,就会出现在onLoad加载一次数据,在onShow中执行this.onLoad()在加载一次数据。
    解决办法:将不需要刷新的数据放在onLoad中执行,将需要刷新的数据放在onShow中执行!
    感谢:感谢editplusx的指正!

    HTML实现当前页面刷新

    首先我们都知道在HTML页面我们要实现当前页面刷新一般会怎么解决呢?
    1,reload()方法刷新当前页面;
    2,replace() 方法刷新当前页面;
    3,页面自动刷新当前页面;
    三种实现js 刷新当前页面的方法用法

    微信小程序----返回上一页刷新或当前页刷新

    1,在实现效果之前,需要知道微信小程序的页面生命周期,不是很清楚的可以看微信小程序----页面生命周期
    2,可以知道微信小程序的页面是由onLoad(页面加载)、onReady(页面初次渲染完成)、onShow(页面显示)、onHide(页面隐藏)、onUnload(页面卸载)五个周期构成;
    3,知道了页面的生命周期,如何实现返回刷新和当前页刷新呢?又在什么场景需要页面刷新效果呢?

    实现方法

    1. 使用生命周期,【onLoad/onShow】重新调用,简单粗暴,能实现效果;
    2. 将会更新数据的方法集中到一个 init 方法中,其他时候需要刷新【重载】,直接调用这个方法,实现局部重载;
    3. 使用页面栈【getCurrentPages】,获取加载页面的方法和参数,调用对应局部重载的方法;
    4. 全局变量的重载,微信小程序----全局状态管理 (便于全局埋点等操作)

    优缺点

    1. 直接使用生命周期,简单粗暴,但是全页面重载,用户体验和资源占用比较明显,不建议使用;
    2. 初始化重载页面方法建议使用,这样加载当前页面数据比较方便,如果需要多接口刷新,直接调用,方便快捷,逻辑清晰,建议当前页面刷新使用;
    3. 页面栈返回刷新,配合页面初始化重载方便,建议返回刷新使用;
    4. 全局变量管理,由于this.setData的限制,所以尽量选择有限制的框架,不然性能消耗很严重,得不偿失;
    5. 页面和返回刷新,建议开发中使用二三配合使用,如果使用方法四,建议使用wxMiniStore!!!
    由于此篇博客比较久远,代码实例,只有第一种方法,有需要后期补上!

    1. 生命周期法刷新页面

    	this.onLoad(this.options);
    	// 或者
    	this.onShow();
    

    注意:如果刷新页面有上一个页面传入的参数时,需要将 【this.options】传给 onLoad!

    当前页面刷新

    场景:

    在这个电商充斥着生活各个角落的时代,都知道在购物过程会给用户生成订单,如果用户不满意或者收货等就需要去修改订单状态,在开发过程中,当用户修改订单成功后,后台一般会返回提示是否修改成功,而不会返回这个订单的详细情况。那么我们如何使前端页面更新这个订单的状态呢?一般有两种方法实现:

    1. 人为的修改前端的数据;
    2. 再次请求数据(也就是页面刷新)。
      为实现取消订单刷新效果:

    这里写图片描述
    实现取消订单刷新效果:
    这里写图片描述
    在这里实现需要实现的就是当前页面刷新,在讲场景的时候都说了,实现的方式是再次请求数据进行更新,如何再次请求数据?就是周期函数的onLoad,将页面重新加载,但是需要注意的是必须对相关data变量进行初始化。

    更新订单状态函数的代码:

    //更新订单状态函数
    updateOrder(orderID, orderState, title){
    	//获取用户保存在本地的个人信息
        let account = wx.getStorageSync('accountInfo'); 
        //请求服务器接口更新订单状态
        app.globalMethod.REQUEST({
          url: urlList.updateOrderStateUrl,
          data: {
            accountID: account.accountID,
            passWord: account.passWord,
            orderID: orderID,
            orderState: orderState,
            token: ''
          },
          success: res => {
            // console.log(res)
            //如果更新成功
            if(res.data.state == '1'){
    	        //提示用户订单状态修改成功
              wx.showToast({title: '您已' + title,success: res => {
                //在提示的成功函数中初始化当前加载订单页为第一页,清空订单列表数据
                this.setData({ currentPage: 1,orderList: []});
                //用onLoad周期方法重新加载,实现当前页面的刷新
                this.onLoad()
              }})
            }
          }
        })
      }
    

    返回上一页刷新

    场景:

    电商购买物品时填写地址,然后返回购买页面,更新填写的新地址。
    为实现返回刷新效果:

    这里写图片描述
    实现返回刷新效果:
    这里写图片描述

    1. 通过页面的生命周期,可以知道在微信小程序中,实现返回上一页的时候其实是直接将隐藏的页面再显示出来,所以不存在页面的再次加载,但是如果业务需求再次加载,在么实现?
    2. 通过上边的逻辑可以看出过程是: A页面 —》 B页面(改变A页面的数据)(在A跳转B的过场实现是A页面隐藏B页面渲染) —》返回A页面(更新A页面数据)(返回过程是隐藏B页面显示A页面
    3. 通过上边的流程,可以看出是在A页面的显示函数中执行加载函数(onShow(){this.onLoad()})

    更新收货地址的代码:

    onShow() { //返回显示页面状态函数
    	//错误处理
    	//this.onLoad()//再次加载,实现返回上一页页面刷新
    	//正确方法
    	//只执行获取地址的方法,来进行局部刷新
    }
    

    2. 页面初始化方法刷新数据

    1. 将需要重新加载或者初始化的变量和方法,放入一个初始化的方法中【initOrderList】;
    2. 页面加载或者navbar切换【getCurrentValue】等,需要重新加载的时候直接调用初始化方法【initOrderList】!
      // 当前选择订单状态
      getCurrentValue({detail}){
        let value = detail.status;
        this.setData({value})
        this.initOrderList();
      },
      // 初始化订单列表
      initOrderList(){
        this.data.list = [];
        this.data.curPage = 1;
        this.data.total = 1000;
        this.getOrderList();
        wx.pageScrollTo({scrollTop: 0})
      }
    

    注意:

    1. 不需要视图层渲染的数据,或者在重新加载的时间段不需要重新渲染的数据,直接使用【this.data.xxx = xxx】进行修改,不要调用 this.setData 方法消耗渲染性能!
    2. 最终不需要视图层渲染的数据,建议另建一个 data 对象保存,或者直接放在页面栈的 this 中,页面进入的时候,逻辑层和视图层通信,微信小程序的处理是将data中的全部数据打包,不会筛选那些页面不需要渲染,所以视图层不使用的数据,单独使用对象保存

    3. 页面栈刷新数据

    1. 以获取上一页页面栈为例,通过 getCurrentPages 获取页面栈;
    2. 判断上一页面是否是【orderConfirm】,也就是确定跳转当前页面的来源;
    3. 此处是选择一个邮寄地址,注意不默认邮寄地址;
    4. 修改【orderConfirm】的【address】数据,及修改邮寄地址;
    5. 修改【isRefreshData】,及返回后页面不重新加载;
    6. 调用【getOrderPreviewInfo】,刷新订单预览的信息,修改地址后邮寄费等改变;
    7. 返回上一页【navigateBack】!
    	// 获取页面栈中的上一页
    	const _getPrevPage = () => {
    	  let pages = getCurrentPages();
    	  let len = pages.length;
    	  return pages && pages.length && pages[len - 2];
    	}
    	
    	// 判断页面栈上一页是否是订单预览界面
        hasPrevPageOrderConfirm(page){
          return page && page.route && page.route.indexOf('orderConfirm') > -1;
        }
      
    	let prevPage = _getPrevPage();
        if(this.hasPrevPageOrderConfirm(prevPage)){
          prevPage.setData({address});
          prevPage.data.isRefreshData = false;
          prevPage.getOrderPreviewInfo();
          this.$route({type: 'navigateBack', params: {delta: 1}})
        }
    

    注意:此处刷新最好和方法二配合使用,这样调用方法,逻辑处理等比较集中处理!

    4. 全局数据刷新

    1. wxMiniStore管理全局数据;
    2. 定义全局的 store;
    import { ProxyStore } from './store/proxyStore';
    let store = new ProxyStore({
      state: {
        address: {},
        orderInfo: {}
      }
    })
    
    1. app.js 中引入 store;
    import store from './utils/store';
    import axios from "./utils/request/axios";
    App({
      store,
      axios
    })
    
    1. 在修改页面全局变量;
    const { store , axios } = getApp();
    let prevPage = _getPrevPage();
    if(this.hasPrevPageOrderConfirm(prevPage)){
      prevPage.getOrderPreviewInfo().then(orderInfo => {
        store.setState({address,orderInfo})
      },console.log)
      this.$route({type: 'navigateBack', params: {delta: 1}})
    }
    

    注意:

    1. 返回修改,都要判断返回的是不是来源页面,比如此处,只有订单确认页面,才会执行这个返回,和返回刷新等操作;
    2. 此处全局数据修改必须调用方法获取数据后,才能设置全局的值!

    总结

    微信小程序要实现页面刷新,简单的说就是在不同的地方执行onLoad周期函数。不过需要注意在刷新时是否需要初始化变量,这个必须注意。

    WXRUI体验二维码

    WXRUI体验码

    如果文章对你有帮助的话,请打开微信扫一下二维码,点击一下广告,支持一下作者!谢谢!

    下载

    我的博客,欢迎交流!

    我的CSDN博客,欢迎交流!

    微信小程序专栏

    前端笔记专栏

    微信小程序实现部分高德地图功能的DEMO下载

    微信小程序实现MUI的部分效果的DEMO下载

    微信小程序实现MUI的GIT项目地址

    微信小程序实例列表

    前端笔记列表

    游戏列表

    展开全文
  • 特别专题一、微信小程序时间戳二、wxss样式 Tips:这里整合微信小程序中常用的代码块 当前代码适用于 2.7.7版本的调试基本库 一、微信小程序时间戳 获取当前 10 位数字的时间戳 var timestamps = Date.parse(new ...

    Tips:这里整合微信小程序中常用的代码块

    当前代码适用于 2.7.7版本的调试基本库

    一、常见小功能

    1.1 获取当前 10 位数字的时间戳
      var timestamps = Date.parse(new Date());
      var timestamp = parseInt(timestamps / 1000);
    
    1.2 页面跳转自动刷新

    将方法体放进 onShow() 中调用即可

    二、wxss样式

    1. 和顶部,左边,右边有间距
    margin-top: xxrpx; /*外边距*/
    padding-top: xrpx;/*内边距*/
    
    margin-left: xx;
    margin-right: xx;
    
    /*如果是一列元素,把他变成横向的,可以使用如下*/
    padding-top:20rpx;
    
    2. 一顺着排列的元素,禁止换行
    white-space:nowrap;
    /* display 样式也要进行更换*/
    display: inline-block;
    
    /*flex 布局 允许换行*/
    flex-wrap: warp;
    
    3. 文字布局
    /*文字位置*/
    text-align: center; /* left,right*/
    
    /*如果一行文字溢出,就要使多出去的文字变成省略号*/
      text-overflow: ellipsis;
      overflow: hidden;
    
    4. 垂直布局

    常常和两者一起使用

    display:flex;
    justify-content:flex-start;

    align-items: center;
    
    5. 设置内变距
    padding : 1px solid #e4e4e4
    /*设置上下左右内边距*/
    padding : 30rpx 30rpx;
    
    6.设置行高
    line-heigth: 50rpx;
    
    7.设置分割线
      border-bottom: 1px solid #e4e4e4;
    
    8. 居中布局的一种方式
    margin: 0 auto;
    
    9. 垂直居中

    三、微信官方 API

    3.1 普通接口

    3.1.1 修改当前界面的标题
     wx.setNavigationBarTitle({
          title: "",
        })
    
    3.1.2 加载响应,。。。

    在这里插入图片描述

        wx.showLoading({
          title: '正在发表中。。。。',
        })
    
    
    // 一般某个任务执行完之后,就要把加载隐藏
     wx.hideLoading();
    
    3.1.3 界面跳转
    //跳转到某一个页面
        wx.navigateTo({
          url: '',
        })
    //回到上一页
       wx.navigateBack({});
    
    3.1.4 自动跳转到页面的首行(在onShow中执行)
        wx.pageScrollTo({
          scrollTop: 0,
        })
    
    3.1.5 自定义组件,数据渲染出现问题
    observer(newVal, oldVal, changedPath) {
    // 属性被改变时执行的函数(可选),也可以写成在methods段中定义的方法名字符串, 如:'_propertyChange'
    // 通常 newVal 就是新设置的数据, oldVal 是旧数据
    }
    
    3.1.6 延时函数

    延时 1000 ms,即1s

         setTimeout(()=>{
            //方法体
          },1000);
    
    3.1.7 某一任务执行成功,即显示相对应的文字

    在这里插入图片描述

        wx.showToast({
                title: '发送成功',
              });
    

    3.2 云开发接口

    3.2.1 操作云函数数据库

    在 index.js 中的 Page 之前加入全局变量

    const db = wx.cloud.database();
    Page({
    
     nonono : function()
    {
    	db.collection("云函数你创建集合的名称").bulabula
    	//这里就是对云数据库的集合相关操作了
    	},
    })
    
    3.2.2 完成微信授权的功能

    在 app.js 中写好相对应的 授权功能函数,
    eg:

    //获取用户授权
      loadUserInfo:function(){
        const that = this;
        wx.getSetting({
          success: res =>{
            const isUserInfo = res.authSetting['scope.userInfo'];
            if(isUserInfo){
              wx.getUserInfo({
                success:res => {
                  console.log(res);
                  const userInfo = res.userInfo;
                  that.globalData.userInfo = userInfo;
                }
              })
            }
          }
        })
      },
    

    然后回到 index.js 中,还是和上面一样,在Page 前面

    // 获取 app.js 中手机的相关信息
    const app = getApp();
    
    //然后后面就可以直接通过 app 调用 app.js中写下的方法,这是一个获取个人姓名的接口实现
    const author = app.globalData.userInfo;
    

    四、wx:key 解决方案

    wx:key 是为了提高循环效率而出现了,给它的值,只要是循环元素中的唯一的标识符就可以了

    1. 字符串类型的循环
    wx:key="{{this}}"
    

    五、常用代码块梳理

    5.1 获取手机的设备信息

    同步获取手机信息
    在 index.js 下实现

      onLoad: function (options) {
        this.initImageSize()
      },
        initImageSize:function(){
          const windowWidth =  wx.getSystemInfoSync().windowWidth;//获取手机的宽度
          console.log(windowWidth)
        },
    

    5.2 延时函数

    延时 0.8 秒,以毫秒为单位

         setTimeout(function(){
              
              },800)
    

    六、特殊组件的实现

    6.1 在当前界面实现一个按钮组件

    先看图
    在这里插入图片描述
    index.wxml

      <!-- 发布按钮布局-->
    
      <view class="write-weibo-btn" hover-class="none" hover-stop-propagation="false">
          <view>+</view>
      </view>
    

    index.wxss

    .write-weibo-btn{
        position:fixed;
        right:50rpx;
        bottom:100rpx;
        width:100rpx;
        height:100rpx;
        background:#74c1e0;
        border-radius:50%;
        display:flex;
        justify-content:center;
        align-items:center;
        font-size:100rpx;
        color:#fff;
        box-shadow: 0 0 5px #rgba(0,0,0,0,5);
    }
    
    .write-weibo-btn view{
        margin-top:-16rpx;
    }
    
    展开全文
  • 微信小程序自定义导航栏,自适应手机屏幕高度(计算微信小程序默认胶囊高度)

    微信小程序自定义导航栏,自适应手机屏幕高度(计算微信小程序默认胶囊高度)

    小编最近遇到了一个需求,要取消掉微信小程序自带的导航栏,然后放一张纯色背景(非白色),然后下滑一段时间后要求变成白色。刚开始做的时候以为没啥难度,使用的是固定高度,做出来一测,不同手机屏幕高度不同,导航栏高度也是不统一的,直接没眼看了 *-*。然后就各种各种找度娘,然并卵!最后在我们一个前端大神的指导下知道了该怎么做,现在分享出来给大家提供参考。

    1、首先在要自定义的页面中的pageName.json中加上,"navigationStyle": "custom" 隐藏微信小程序原生导航栏。

    2、调用微信api获取手机系统屏幕高度和导航栏高度

    getTopHeight:function(){
        //获取胶囊位置信息
        let menuButtonObject = wx.getMenuButtonBoundingClientRect();
        //定义导航位置参数
        var globalData={
          navHeight:0,
          navTop:0,
          windowHeight:0,
          ww:0,
          hh:0,
        }
        var navTop;
        var navHeight;
        //获取手机系统信息
        wx.getSystemInfo({
          success: res => {
            //导航高度
            var statusBarHeight = res.statusBarHeight;
            navTop = menuButtonObject.top;
            navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight) * 2;
            globalData.navHeight = navHeight;
            globalData.navTop = navTop;
            globalData.windowHeight = res.windowHeight;
            //可视窗口宽度
            var ww = res.windowWidth;
            //可视窗口高度
            var hh = res.windowHeight;
            globalData.ww = ww;
            globalData.hh = hh;
            console.log(globalData)
            //这是我自定义的返回图标位置高度 21单位是 rpx,是图标高度的一半,图标高度为48rpx
            var backHeight=(navTop*2+(navHeight-navTop))-21;
            that.setData({
              globalData:globalData,
              backHeight:backHeight
            })
          },
          fail(err) {
            console.log(err);
          }
        })
    }

    3、这里是wxml中的内容

    <view class="bg-img">
      <image src="img/bgImg.png" class='img'></image>
    </view>
    <image src="img/back.png" class="backimg" bindtap="backPage" style="top:{{backHeight}}rpx;"></image>
    <!-- 自定义导航 高度单位 rpx ,这里+4 是因为样式美观,你喜欢加多少都行,hidden这个参数在下面的方法中获取-->
    <view class="top-view" style="height:{{(globalData.navHeight*2)+4}}rpx" hidden="{{hidden}}">
      <image src="img/back-black.png" class="backimg" bindtap="backPage" style="top:{{backHeight}}rpx;"></image>
    </view>

    4、监听页面滑动高度

    /**
       * 监听页面滑动事件
       * @param {} e 
       */
      onPageScroll:function(e){
        //e.srolltop 是页面滑动的实时高度
        console.log(e.scrollTop)
        var that=this;
        //这里390是我顶部导航栏背景图片的高度 height 则是计算出来背景图片隐藏的高度
        var height=(390-(that.data.globalData.navHeight*2)+4)/2;
        console.log(height)
        if(parseInt(e.scrollTop)>height){
          that.setData({
            hidden:false
          })
        }else{
          that.setData({
            hidden:true
          })
        }
      },

    至此,自定义导航栏完成,觉得有用的道友点个赞,如果有更好的方法,欢迎交流欢迎分享!

    展开全文
  • “锚点”功能在实际应用设计的好,可以提高用户体验。...由于微信小程序页面无dom操作,改功能改如何操作呢?一开始想到 wx.pageScrollTo(Object object) 这个API,由于每个点击每个导航利用wx.pageScr...

    “锚点”功能在实际应用设计的好,可以提高用户体验。今天碰到一个类似下面功能:

    9baee2e8c145f31700bfbead95e2ddb8.png

    由于页面数据比较多,除了做些上拉加载,下拉刷新等优化。还可以进行进行分类,如上图。功能要求:点击导航的菜单,相应页面的分类内容滑动到页面顶部。由于微信小程序页面无dom操作,改功能改如何操作呢?

    一开始想到 wx.pageScrollTo(Object object) 这个API,由于每个点击每个导航利用wx.pageScrollTo滚动到相应分类的scrollTop不能确定,所以放弃了。

    后发现 scroll-view 组件 的属性 scroll-into-view 可以利用一下:

    scroll-into-view="{{toView}}"

    bindscroll="scrollTopFun"

    scroll-top="{{scrollTop.scroll_top}}"

    scroll-with-animation="true"

    >

    data- bindtap='navHandleClick'

    wx:for="{{navietm}}" wx:key="{{index}}">{{item}}

    {{item.name}}

    加入关注

    ·昨天·

    2018-09-12 22:15:00

    电网故障停限电

    送电时间:

    2018-09-13 16:15:00

    预计

    停电范围:

    [开福区] 湘江世纪城、湘江世纪城、湘江世纪城、湘江世纪城、湘江世纪城、湘江世纪城、

    停电区域:

    湖南省长沙市开福区

    ·昨天·

    2018-09-12 22:15:00

    电网故障停限电

    送电时间:

    2018-09-13 16:15:00

    预计

    停电范围:

    [开福区] 湘江世纪城、湘江世纪城、湘江世纪城、湘江世纪城、湘江世纪城、湘江世纪城、

    停电区域:

    湖南省长沙市开福区

    没有更多信息了

    导航

    返回顶部

    wx:for="{{navlist}}" wx:key="{{index}}">

    {{item.name}}

    展开全文
  • 公司使用微信小程序来开发公司的一个产品,有幸参与到其中。在最近的一次迭代中,体验优化有这样一个点,点击类目时,分别实现横向滚动和纵向滚动的中间定位: 技术方案 横向滚动 一、wxml-核心代码 <...
  • 只有在当前小程序是被其他小程序打开时可以调用成功 注意:微信客户端 iOS 6.5.9,Android 6.5.10 及以上版本支持 可封装函数为: //extraData(object) 需要返回给上一个小程序的数据,上一个小程序可在 App.onShow ...
  • 微信小程序ScrollTop的获取以及赋值

    万次阅读 2019-05-23 01:29:35
    微信小程序获取元素高度宽度 1.创建节点 var query = wx.createSelectorQuery(); 2.绑定DOM query.select('#box').boundingClientRect() 3.获取元素信息 query.exec(function (res) { //console.log(res)...
  • 微信小程序WebSocket实现聊天对话功能完整源码

    万次阅读 多人点赞 2018-06-26 10:20:57
    微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 正文: js var app = getApp(); var socketOpen = false; var frameBuffer_Data, session, SocketTask; var url = 'ws://请填写您的长...
  • 小程序 | 微信小程序实现商品分类列表
  • 微信小程序 + Antv F2

    千次阅读 2019-12-09 15:56:11
    微信小程序 + Antv F2一、项目搭建二、相关问题三、总结 一、项目搭建 1、 创建微信小程序项目(下载微信小程序IDE,详细创建微信小程序流程见: 小程序文档:) 2、在项目根目录下,初始化创建package.json文件,...
  • 微信小程序 列表刷新:  微信小程序,最近自己学习微信小程序的知识,就想实现现在APP 那种列表刷新,下拉刷新,上拉加载等功能。  先开看一下界面 1.wx.request (获取远程服务器的数据,可以理解成$.ajax) 2....
  • 微信小程序仿微信聊天

    千次阅读 2019-07-01 14:04:01
    主要思想使用websocket,微信小程序有提供websocket的直接方法,所有问题的难点在于后端代码的编写。 效果示意图 演示视频地址https://www.bilibili.com/video/av57449552/ 长话短说直接上代码 微信小程序端...
  • 微信小程序基础

    千次阅读 2018-12-09 16:45:47
    什么是微信小程序 微信小程序是一种不需下载安装即可使用的应用,他实现了应用“触手可及”的梦想。 用户扫一扫或者搜一下即可打开应用,也提现了“用完即走”的理念。 用户不用关心是否安装太多应用的问题,...
  • 由于微信小程序页面无dom操作,改功能改如何操作呢? 一开始想到 wx.pageScrollTo(Object object) 这个API,由于每个点击每个导航利用wx.pageScrollTo滚动到相应分类的scrollTop不能确定,所以放弃了。 后发现 ...
  • 本文实例为大家分享了微信小程序实现美团菜单的具体代码,供大家参考,具体内容如下 1.功能仅是菜单功能一部分,仅供参考 2.需求描述:右侧菜品部分在滚动的时候,左侧菜品选中分类与右侧第一行菜品所在分类对应...
  • 小程序开发中,有很多封装好的控件供开发者使用,但是,很常见的tab选项卡居然没有,只能自己搞一个。 实现原理也很简单,无非是用给view(tab)设置一个点击事件bintap,并且给view(tab)一个data-idx索引,根据当前...
  • 微信小程序开发 自学

    2020-07-01 23:54:28
    微信小程序开发
  • view class="text-box" scroll-y="true" scroll-top="{{scrollTop}}"> <text>{{text}}</text> </view> <button disabled="{{!canAdd}}" bindtap="add">add line</button> <...
  • 微信小程序 教程之wxapp视图容器 swiper 微信小程序 教程之wxapp视图容器 scroll-view 微信小程序 教程之wxapp 视图容器 view scroll-view 可滚动视图区域。 属性名 类型 默认值 说明 scroll-x Boolean ...
  • 宿主环境提供了 Page() 构造器用来注册小程序页面 Page()在页面脚本page.js中调用,Page() 的调用方式如下所示 Page构造器接受一个Object参数 data属性是当前页面的初始数据 onLoad、onReady、onShow、onHide、...
  • 微信小程序Demo

    2018-08-03 15:16:28
    微信小程序开始内测到现在, 已经一个月过去了,终于把我自己的微信小程序 demo 墨迹完成了. 真的是墨迹完的, 连我自己都佩服自己的拖延症了(懒癌少女已弃疗*ヾ(′A`)ノ?*), 总之算是基本完成了(明明有很多组件啊 ...
  • 微信小程序

    2019-12-14 10:26:15
    自签名证书微信小程序样式iconfont矢量图标的使用网易云音乐轮播图apiBugssetData监听蓝牙&耳机连接数据处理数组相关添加对象滚动urlencodeJavascriptJava 正则表达式贪婪模式&非贪婪模式Javascript正则...
  • 微信小程序实现仿微信聊天界面(各种细节处理)

    万次阅读 多人点赞 2019-01-07 16:26:47
    query.select('.scrollMsg').boundingClientRect(function(rect) { that.setData({ scrollTop: rect.height+'px'; }); }).exec(); 3.(推荐)将所有msg都编号如:msg-0,msg-1,msg-2… 直接锁定最后一条msg,...
  • 微信小程序让屏幕自动向下滚动

    千次阅读 2018-07-24 10:16:17
    微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 正文: wx.pageScrollTo(OBJECT) 基础库 1.4.0 开始支持,低版本需做兼容处理 将页面滚动到目标位置。 OBJECT参数说明: 参数名 ...
  • 本文实例为大家分享了微信小程序城市选择器,供大家参考,具体内容如下 代码很简单. var city = require('../../utils/city.js'); var app = getApp() Page({ data: { searchLetter: [], showLetter: "", ...
  • 最近在研究微信小程序,被这个返回顶层给坑了一波,下面贴代码 wxml代码: <scroll xss=removed scroll-top=50 enable-back-to-top=true scroll-top={{scrollTop.scroll_top}} bindscroll=scrollTopFun> ...
  • 微信小程序中如果判断页面滚动方向? 解决方案 1.用到微信小程序API 获取页面实际高度 nodesRef.boundingClientRect([callback]) 监听用户滑动页面事件onPageScroll。 2.获取页面实际高度 <!--WXML--> ...
  • 微信小程序组件_小程序视图容器scroll-view微信小程序视图容器scroll-view,可滚动视图区域。属性名类型默认值说明scroll-xBooleanfalse允许横向滚动scroll-yBooleanfalse允许纵向滚动upper-thresholdNumber50距顶部...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,491
精华内容 996
关键字:

scrolltop微信小程序

微信小程序 订阅