精华内容
下载资源
问答
  • 微信小程序 tab 顶部选项卡下载

    千次下载 热门讨论 2016-12-01 12:33:06
    微信小程序 tab 顶部选项卡
  • 主要介绍了微信小程序 Tab页切换更新数据的相关资料,需要的朋友可以参考下
  • 微信小程序tab分页demo

    2016-12-22 15:46:47
    微信小程序tab分页demo,目前使用固定数据展示,具体请结合api请求服务器数据
  • 主要介绍了微信小程序tab切换可滑动切换导航栏跟随滚动实现代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 微信小程序 tab + 下拉刷新,上拉加载 原理就是下拉刷新,必须要先重置分页 上代码: 1.data里面的数据: leaseList: [], rentalList: [], pageObj: { lease: { page: 1, limit: 10, url: '/webapi/leaseInfo/...

    微信小程序 tab + 下拉刷新,上拉加载

    原理就是下拉刷新,必须要先重置分页
    上代码:
    1.data里面的数据:

    	leaseList: [],
        rentalList: [],
        pageObj: {
          lease: { page: 1, limit: 10, url: '/webapi/leaseInfo/xxxx.json',
            callback: function(result, that) {
              that.setData({
                leaseList: that.data.leaseList.concat(result.data)
              })
            }
          },
          rental: { page: 1, limit: 10, url: '/webapi/rentalInfo/xxxx.json',
            callback: function(result, that) {
              that.setData({
                rentalList: that.data.rentalList.concat(result.data),
              })
            }
          },
        },
    

    2.onready里面的代码: currentIndex是tab的index

    onReady: function () {
        if (!this.data.urlHasIndex) {
          var that = this
          var type = that.data.currentIndex == 0 ? 'lease' : 'rental'
          that.loadPageData(type)
        }
      },
    

    3.从后台加载数据:

    loadPageData: function loadPageData(type) {
        var that = this;
        if (that.data.pageObj[type]) {
          var params = {};
          params.page = that.data.pageObj[type].page;
          params.limit = that.data.pageObj[type].limit;
          getApp().GET({
            url: that.data.pageObj[type].url,
            data: params,
            success: function success(result) {
              if (result.data && result.data.length > 0) {
                var pageObj = that.data.pageObj[type];
                pageObj.callback && pageObj.callback(result, that);
              }
            }
          });
        }
      },
    

    4.最重要的代码就是下面了:下拉刷新,需要把对应的list给置空再加载。上拉加载需要concat连接到新的数据

    onPullDownRefresh: function onPullDownRefresh() {
        // 下拉刷新,先重置分页
        var that = this;
        var type = that.data.currentIndex == 0 ? 'lease' : 'rental';
        var obj = { 'lease': 'leaseList', 'rental': 'rentalList' };
        that.data.pageObj[type].page = 1;
        var emptyData = {};
        emptyData[obj[type]] = that.data[obj[type]] = [];
        that.setData(emptyData);
        that.loadPageData(type);
        wx.stopPullDownRefresh();
      },
      onReachBottom: function onReachBottom() {
        var that = this;
        var type = that.data.currentIndex == 0 ? 'lease' : 'rental';
        that.data.pageObj[type].page++;
        that.loadPageData(type);
      },
    

    5.tab切换时的代码:

      changTab: function changTab(e) {
        var that = this;
        var index = e.detail.index;
        var type = index == 0 ? 'lease' : 'rental';
        var page = that.data.pageObj[type].page = 1;
        var obj = { 'lease': 'leaseList', 'rental': 'rentalList' };
    
        var emptyData = { currentIndex: index };
        emptyData[obj[type]] = that.data[obj[type]] = [];
    
        that.setData(emptyData);
        wx.pageScrollTo({ scrollTop: 0, duration: 300 });
        that.loadPageData(type);//切换时候需要重新加载一次
      },
    

    这样就可以啦 _

    展开全文
  • 微信小程序Tab页、轮播图demo--第一课.jpg 1 . 概述 我们在学习微信小程序或者做项目时,应该会遇到轮播Banner效果情况,那么这个轮播功能我们应该怎么编写呢? 今天我们说下微信小程序轮播Banner效果的实现,主要...
        
    2449059-f93b9e4f1aff966e.jpg
    微信小程序Tab页、轮播图demo--第一课.jpg
    1 . 概述

    我们在学习微信小程序或者做项目时,应该会遇到轮播Banner效果情况,那么这个轮播功能我们应该怎么编写呢?

    今天我们说下微信小程序轮播Banner效果的实现,主要思路利用小程序列表渲染功能,读取导航栏中栏目数据的index和item。将index存入事件中可以读取的data中。js读取这个data值之后,修改相应模块元素的class,修改样式。

    最巧妙的就是利用{{currentNavbar==idx ? 'active' : ''}}这个数据绑定判断当前块是否被选中的状态。今天我们就分享这样的小教程。希望对大家有所帮助。

    不多说了,二当家要上图来啦!

    2449059-e69e7203a22ece32
    image

    今天分享的是图一

    2449059-fec9f21b935ddaf8
    image

    快去拿个小板凳,坐等跟多Tab更新

    2 . wxml
    <view class="wrap" bindtouchstart="touchStart" bindtouchend="touchEnd">
      <view class="nav-item {{testClass[index]}}" wx:for="{{testNav}}" wx:key="" data-index="{{index}}">
        <view>{{item.word}}</view>
      </view>
    </view>
    
    3. js
    var flag = 0;
    var classCatch = ['current', 'next', 'next', 'next'];
    var touch = [0,0];
    Page({
      data: {
        testClass:classCatch,
        testCurrentNav:0,
        testNav:[{
          word:'我来自后方Geekxz',
        },{
            word: '我来自后方Geekxz     22222222',
        },{
            word: '我来自后方Geekxz    3333333333333',
        },{
            word: '我来自后方Geekxz   6666666666666',
        }]
      },
        /**
       * 测试轮播图
       */
      touchStart (e){
        touch[0] = e.touches[0].clientX
      },
      touchEnd (e){
        touch[1] = e.changedTouches[0].clientX;
        if(touch[0]-touch[1]>5){
          this.swipNext();
        } else if (touch[1] - touch[0] > 5){
          this.swipPrev();
        }
      },
      swipNext (e) {
         flag++;
         if (flag < this.data.testNav.length){
           for (var i = 0; i < this.data.testNav.length; i++) {
             if (i == flag) {
               classCatch[i] = 'current';
             } else if (i < flag) {
               classCatch[i] = 'prev';
             } else {
               classCatch[i] = 'next';
             }
           }
           this.setData({
             testClass: classCatch
           })
         }else{
           flag = this.data.testNav.length-1;
         }
      },
      swipPrev(e) {
        flag--;
        if (flag+1 > 0 ) {
          for (var i = 0; i < this.data.testNav.length; i++) {
            if (i == flag) {
              classCatch[i] = 'current';
            } else if (i < flag) {
              classCatch[i] = 'prev';
            } else {
              classCatch[i] = 'next';
            }
          }
          this.setData({
            testClass: classCatch
          })
        } else {
          flag = 0;
        }
      }
    })
    
    4. css
    .wrap{
      margin-top: 20rpx;
      color: #999;
      position: relative;
      width: 750rpx;
      height: 250rpx;
      border-top:1px solid #ccc;
      border-bottom:1px solid #ccc;
    }
    .nav-item{
      margin-top:10px;
      width: 400rpx;
      height: 200rpx;
      box-shadow: 0 0 5rpx #e24233;
      padding: 5rpx;
      transition: all 0.5s;
      word-break:break-all;
      background-color: snow;
    }
    .prev{
      position: absolute;
      transform: scale(0.8);
      left: -280rpx;
      margin-right: 55rpx;
    }
    .current{
      position: absolute;
      left: 50%;
      margin-left: -200rpx;
    }
    .next{
      position: absolute;
      left:620rpx;
      top: 0;
      transform: scale(0.8);
      z-index: 10;
    }
    .next+.next{
      z-index: -1;
      background-color: deepskyblue;
    }
    

    以上代码为效果为 图二

    注:如需要获取案例,或者遇到其他问题,本人微信:geekxz 。


    2449059-6348841f24f7ec34
    image

    你可能还喜欢 ,点击下方图片即可阅读

    微信小程序独家秘笈之左滑删除

    如何快速制作微信小程序预约功能在这里只要十分钟

    开发 | 小程序「分享图」生成难? 一招教你轻松解决
    展开全文
  • 微信小程序tab点击监听方法:onTabItemTap() 在页面没有获取user或者没有登陆成功的时候,再page页面(首页)点击任何功能都让其返回登陆页面,可以用onTabItemTap()函数进行控制。 onTabItemTap() { let self ...

     微信小程序tab点击监听方法:onTabItemTap()

    在页面没有获取user或者没有登陆成功的时候,在page页面(首页)点击任何功能都让其返回登陆页面,可以用onTabItemTap()函数进行控制。

      onTabItemTap() {
        let self = this
        if (!wx.getStorageSync('user')) {
          wx.showModal({
            title: '提示',
            content: '账号尚未登录,请先登录账号',
            success: res => {
              if (res.confirm) {
                wx.navigateTo({
                  url: '/pages/login/login'
                })
              } else if (res.cancel) {
                wx.reLaunch({
                  url: '/pages/main/homePage'
                })
              }
            }
          })
        }
      },

    实战项目知识小积累,也希望帮助到有需要的你们,也欢迎大家来吐槽。

    展开全文
  • 今天在小程序开发时遇到了一个小问题,首先在两个tab页面中都有用到Echarts图表,在页面加载完成时,两个页面的图表也完成绘制。于是就出现了如图问题: 页面完成加载,显示正常 tab切换,该页面的图表缩成了一坨 ...

    今天在小程序开发时遇到了一个小问题,首先在两个tab页面中都有用到Echarts图表,在页面加载完成时,两个页面的图表也完成绘制。于是就出现了如图问题:

    • 页面完成加载,显示正常
      在这里插入图片描述
    • tab切换,该页面的图表缩成了一坨
      在这里插入图片描述

    解决方法:
    在这里插入图片描述
    在第二个tab页的图表中加上一个条件,只有当currentTab为1时也就是只有在切换到当前页面时该页面的图表才会加载。然后就顺利解决啦~
    在这里插入图片描述

    展开全文
  • 微信小程序tab切换效果

    千次阅读 2018-09-07 11:47:33
    微信小程序tab切换效果简单实现方法案例 wxml &amp;lt;view class='a_bar '&amp;gt; &amp;lt;text class=&quot;{{selectednow?'active':'default'}}&quot; bindtap=&quot;selectednow&...
  • 微信小程序tab切换,可滑动切换,导航栏跟随滚动实现简介解决过程 简介 看到今日头条小程序页面可以滑动切换,而且tab导航条也会跟着滚动,点击tab导航,页面滑动,切导航栏也会跟着滚动,就想着要怎么实现这个功能 ...
  • 微信小程序tab

    2020-12-21 14:14:40
    在app.json添加以下代码 "tabBar": { "list":[{ "pagePath": "pages/qt_overviewer/index", "text": "质检概况", "iconPath": "./image/zhijian.png", "selectedIconPath": "./image/zhijian.png" ...
  • 微信小程序tab切换

    2020-07-16 16:43:46
    ml: <view class='navbar'> <scroll-view scroll-x="true" class='navbar-box'> <... 'bar__item_on' : ''}}" bindtap="tabClick"> <view class="navbar__titl..
  • view class="swiper-tab"> <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">设备故障报修</view> <view class="swiper-tab-list {{...
  • 最近一个人负责公司的微信小程序项目,项目做完了,给大家分享一点开发中遇到的坑已经常用的组件,话不多说,今天分享TAB选项卡!1、先看效果:2、wxml代码<view class='container'> <view class='tabbox'&...
  • 监听滚动条,实时监听原有导航栏的位置,如果到达临界点(临界点这个东西要看项目的具体需求),显示悬浮的tab,反之隐藏tab onPageScroll(){ if (query) { query.select('.query_nav_box').boundingClientRect...
  • 使用微信小程序tab-bar带来一个算不上bug的影响 tab-bar常用作微信小程序中切换页面。常见首页页面下面有“首页”,“详情”,“我的”三个按钮。我们点击按钮实现跳转到按钮相对应的页面。其中我们利用tab-bar...
  • 微信小程序 tab自定义

    2018-12-05 14:47:46
    写法很简单,找到app.json文件后。 直接上代码 图片: 效果图如上
  • 微信小程序 tab切换

    千次阅读 2018-01-17 09:30:27
    设置背景颜色就直接在page里设置 page {...tab切换: navigator 页面链接 传参的格式为url="路径?title={{item.title}}" 多个用&&连接 下个页面接收参数: wxml: view class="container
  • 微信小程序 tab选项卡

    2019-08-08 18:09:47
    view class="swiper-tab"> <view class="swiper-tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab">车牌校验</view> <view class="swiper-tab-i...
  • 先在components里面新建组件 tabs.js代码 Component({ //允许slot ... tabTitle: { type: Array, value: [] } }, lifetimes: { attached: function () { //查看父组件传递的值 console
  • 微信小程序tab栏切换

    2019-10-24 15:30:02
    index.wxml 消息 <text data-...
  • tab.html <view class="container">...view class="tab-nav"> <block wx:for="{{tabNav}}" wx:key="*this"> <text bindtap="onTabNav" data-index="{{index}}" class="{{currentI...
  • 微信小程序tab选项卡

    千次阅读 2018-05-30 01:21:21
    .wxml ...swiper-tab"&gt; &lt;view class="swiper-tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab"&gt;全部&l

空空如也

空空如也

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

微信小程序tab

微信小程序 订阅