微信开发页面 选项卡_启用开发者选项微信公众号如何打开微信素材 - CSDN
  • 微信小程序开发选项卡.在android中选项卡一般用fragment,到了小程序这里瞬间懵逼了. 总算做出来了.分享出来看看. 先看效果: 再上代码: 1.index.wxml 哈哈 呵呵 嘿嘿 我是哈哈 我是呵呵 ...

    微信小程序开发中选项卡.在android中选项卡一般用fragment,到了小程序这里瞬间懵逼了.

    总算做出来了.分享出来看看.

    先看效果:


    再上代码:

    1.index.wxml

    <!--index.wxml-->
    <view class="swiper-tab">
        <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">哈哈</view>
        <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">呵呵</view>
        <view class="swiper-tab-list {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">嘿嘿</view>
    </view>
    
    <swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 31}}px" bindchange="bindChange">
        <!-- 我是哈哈 -->
        <swiper-item>
          <view>我是哈哈</view>
        </swiper-item>
        <!-- 我是呵呵 -->
        <swiper-item>
          <view>我是呵呵</view>
        </swiper-item>
        <!-- 我是嘿嘿 -->
        <swiper-item>
          <view>我是嘿嘿</view>
        </swiper-item>
    </swiper>
    2.index.wxss

    /**index.wxss**/
    .swiper-tab{
    	width: 100%;
    	border-bottom: 2rpx solid #777777;
    	text-align: center;
    	line-height: 80rpx;}
    .swiper-tab-list{  font-size: 30rpx;
        display: inline-block;
    	width: 33.33%;
    	color: #777777;
    }
    .on{ color: #da7c0c;
    	border-bottom: 5rpx solid #da7c0c;}
    
    .swiper-box{ display: block; height: 100%; width: 100%; overflow: hidden; }
    .swiper-box view{
    	text-align: center;
    }

    3.index.js

    //index.js
    //获取应用实例
    var app = getApp()
    Page( {
      data: {
        /**
            * 页面配置
            */
        winWidth: 0,
        winHeight: 0,
        // tab切换
        currentTab: 0,
      },
      onLoad: function() {
        var that = this;
    
        /**
         * 获取系统信息
         */
        wx.getSystemInfo( {
    
          success: function( res ) {
            that.setData( {
              winWidth: res.windowWidth,
              winHeight: res.windowHeight
            });
          }
    
        });
      },
      /**
         * 滑动切换tab
         */
      bindChange: function( e ) {
    
        var that = this;
        that.setData( { currentTab: e.detail.current });
    
      },
      /**
       * 点击tab切换
       */
      swichNav: function( e ) {
    
        var that = this;
    
        if( this.data.currentTab === e.target.dataset.current ) {
          return false;
        } else {
          that.setData( {
            currentTab: e.target.dataset.current
          })
        }
      }
    })
    


    之前没有上传代码.这是下图的代码

    demo下载地址



    这样一个类似viewpage的顶部选项卡就出来了.

    底部选项卡TabBar


    我的博客,欢迎批评!

    展开全文
  • 效果图,既可以点击切换,又可以滑动切换 .wxml<!--pages/detail/detail.wxml--> 全部 <vi

    效果图,既可以点击切换,又可以滑动切换
    这里写图片描述

    .wxml

    <!--pages/detail/detail.wxml-->
    <view class="swiper-tab">
        <view class="swiper-tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab">全部</view>
        <view class="swiper-tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="clickTab">提现中</view>
        <view class="swiper-tab-item {{currentTab==2?'active':''}}" data-current="2" bindtap="clickTab">已提现</view>
    </view>
    
    <swiper current="{{currentTab}}" duration="300"  bindchange="swiperTab">
        <swiper-item ><view>全部</view></swiper-item>
        <swiper-item><view>提现中</view></swiper-item>
        <swiper-item><view>已提现</view></swiper-item>
    </swiper>
    
    

    .wxss

    /* pages/detail/detail.wxss */
    .swiper-tab{
        width: 100%;
        border-bottom: 2rpx solid #ccc;
        text-align: center;
        height: 88rpx;
        line-height: 88rpx;
        display: flex;
        flex-flow: row;
        justify-content: space-between;
    }
    .swiper-tab-item{
        width: 30%; 
        color:#434343;
    }
    .active{
        color:#F65959;
        border-bottom: 4rpx solid #F65959;
    }
    swiper{
      text-align: center;
    }
    

    .js

    // pages/detail/detail.js
    var app = getApp()
    Page({
      data: {
        currentTab: 0
      },
      onLoad: function (options) {
        // 页面初始化 options为页面跳转所带来的参数
    
      },
      //滑动切换
      swiperTab: function (e) {
        var that = this;
        that.setData({
          currentTab: e.detail.current
        });
      },
      //点击切换
      clickTab: function (e) {
        var that = this;
        if (this.data.currentTab === e.target.dataset.current) {
          return false;
        } else {
          that.setData({
            currentTab: e.target.dataset.current
          })
        }
      }
    })
    

    在这里插入图片描述

    展开全文
  • 开发微信小程序的时候,会遇到选项卡切换,这里有一个小例子,可以做为参考,代码如下 结构部分: view class="swiper-tab"> view class="swiper-tab-item {{currentTab==0?'active':''}}" data-...

    在开发微信小程序的时候,会遇到选项卡切换,这里有一个小例子,可以做为参考,代码如下

    结构部分:

    <view class="swiper-tab">
    <view class="swiper-tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab">热点</view>
    <view class="swiper-tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="clickTab">体育</view>
    <view class="swiper-tab-item {{currentTab==2?'active':''}}" data-current="2" bindtap="clickTab">社会</view>
    </view>

    <swiper current="{{currentTab}}" duration="300" bindchange="swiperTab">
    <swiper-item><view>热点</view></swiper-item>
    <swiper-item><view>体育</view></swiper-item>
    <swiper-item><view>社会</view></swiper-item>
    </swiper>
    JS部分

    var app = getApp()
    Page({
    data: {
    currentTab: 0
    },
    onLoad: function (options) {
    // 页面初始化 options为页面跳转所带来的参数

    },
    //滑动切换
    swiperTab: function (e) {
    var that = this;
    that.setData({
    currentTba: e.detail.current
    });
    },
    //点击切换
    clickTab: function (e) {

    var that = this;

    if (this.data.currentTab === e.target.dataset.current) {
    return false;
    } else {
    that.setData({
    currentTab: e.target.dataset.current
    })
    }
    }

    })
    样式部分

    .swiper-tab{
    width: 100%;
    border-bottom: 2rpx solid #ccc;
    text-align: center;
    height: 88rpx;
    line-height: 88rpx;
    font-weight: bold;
    }
    .swiper-tab-item{
    display: inline-block;
    width: 33.33%;
    color:red;
    }
    .active{
    color:aqua;
    border-bottom: 4rpx solid red;
    }

    展开全文
  • 时隔一个月之久今天再聊聊小程序吧,选项卡是在PC以及移动端经常使用的,这次在开发小程序的过程中一个选项卡可把我难住了,今天咱们就来说一下。 大多数的商城类小程序都有这个功能,点击“全部订单”,“待付款...

      时隔一个月之久今天再聊聊小程序吧,选项卡是在PC以及移动端经常使用的,这次在开发小程序的过程中一个选项卡可把我难住了,今天咱们就来说一下。

    大多数的商城类小程序都有这个功能,点击“全部订单”,“待付款”,“待发货”,“待收货”,“已完成”,会跳转页面且跳至与之相对应的选项卡中。所以我们在开发该小程序时也做了相同的功能。如下图:


     
     

    选项卡静态布局思路: 主要用到 scroll-viewswiper标签,选项卡切换主要依靠 swiper 中的 current 属性,不懂请自行查看小程序API。
    跳转页面且跳至与之相对应的选项卡思路:
    首先在 app.js 中配置 globalData
    在“个人中心” js 文件中配置点击该项跳转至与之对应的 tab 的 index。
    在“个人中心”跳转页面时通过 globalData 传递 index 给“全部订单”页面,“全部订单”页面通过 app.globalData.currentLocation 接受数据,改变选项卡的切换。

    app.js 代码

      globalData: {
        userInfo: null
      }
    

    个人中心 wxml 代码

    <!--九宫格  -->
    <view class="page">
      <view class="page__bd">
        <view class="weui-grids">
          <view class="allrec" bindtap="allForm">
              <text>我的订单</text>
              <view class="more">查看更多订单</view>
              <image class='moreImg' src='../../img/more.png'></image>
          </view>
          <!--待付款  -->
          <view class="weui-grid" hover-class="weui-grid_active" bindtap="noPay">
            <image class="weui-grid__icon" src="../../img/wallet.png" />
            <view class="weui-badge" hidden="{{false}}">{{badgeNum1}}</view>
            <view class="weui-grid__label label">待付款</view>
          </view>
    
          <!--待发货  -->  
          <view class="weui-grid" hover-class="weui-grid_active" bindtap="noSend">
            <image class="weui-grid__icon" src="../../img/wallet-1.png" />
            <view class="weui-badge" hidden="{{false}}">{{badgeNum1}}</view>
            <view class="weui-grid__label label">待发货</view>
          </view>
    
          <!--已发货  -->
          <view class="weui-grid" hover-class="weui-grid_active" bindtap="sended">
            <image class="weui-grid__icon" src="../../img/wallet-2.png" />
            <view class="weui-badge" hidden="{{false}}">{{badgeNum1}}</view>
            <view class="weui-grid__label label">待收货</view>
          </view>
    
          <!--已完成  -->
          <view class="weui-grid" hover-class="weui-grid_active" bindtap="completed">
            <image class="weui-grid__icon" src="../../img/wallet-3.png" />
            <view class="weui-grid__label label">已完成</view>
          </view>
        </view>
      </view>
    </view>
    

    个人中心 js 代码

    var app = getApp()
    var util = require('../../utils/util.js')
    var formatLocation = util.formatLocation
    
    Page({
      data: {
      },
      // 指定 全部订单 和 九宫格中按钮 点击跳转至 选项卡中 与之对应的tab
      allForm:function(){
        app.globalData.currentLocation = 0,
        wx.navigateTo({ url: '../orderForm/orderForm' }) 
      },
      noPay:function(){
        app.globalData.currentLocation = 1,
        wx.navigateTo({ url: '../orderForm/orderForm' })  
      },
      noSend:function(){
        app.globalData.currentLocation = 2,
        wx.navigateTo({ url: '../orderForm/orderForm' }) 
      },
      sended:function(){
        app.globalData.currentLocation = 3,
        wx.navigateTo({ url: '../orderForm/orderForm' }) 
      },
      completed:function(){
        app.globalData.currentLocation = 4,
        wx.navigateTo({ url: '../orderForm/orderForm' }) 
      }
    })
    
    

    个人中心 wxss 代码 (样式可能会不全,需要引入weui.wxss文件)

    /*九宫格  */
    .weui-grids{
      border-left: none;
    }
    .weui-grid{
      width: 25%;
      border: none;
      position: relative;
      padding:20px 10px 10px;
    }
    .weui-grid .weui-badge{
    width: 12rpx;
    height: 28rpx;
    border-radius: 50%;
      position: absolute;
      right: 40rpx;
      top: 20rpx;
      background: #df0202;
    }
    
    
    /* list  */
    .weui-cell__hd{
      margin-right: 30rpx;
      vertical-align: middle;
      width:20px;
      height: 20px;
    }
    .weui-cell__hd image{
      width: 50rpx;
      height: 50rpx;
    }
    .weui-cell__ft{
      color: #fff;
      background: #dd3838;
      border-radius: 20rpx;
      text-align: center;
      margin-right: 10rpx;
      padding: 0 5rpx;
    }
    .all{
        font-size: 30rpx;
    }
    

    全部订单 wxml 代码

    <!--全部订单页  -->
      <!--选项卡标题  -->
    
    <scroll-view scroll-x="true" bindscroll="scroll" class="scroll-view_H list-liu">
      <view class="scroll-view-item_H swiper-tab-list {{currentTab==0?'on':''}}" data-current="0" bindtap="swichNav" hover-class="eee">全部</view>
      <view class="scroll-view-item_H swiper-tab-list {{currentTab==1?'on':''}}" data-current="1" bindtap="swichNav" hover-class="eee">待付款</view>
      <view class="scroll-view-item_H swiper-tab-list {{currentTab==2?'on':''}}" data-current="2" bindtap="swichNav" hover-class="eee">待发货</view>
      <view class="scroll-view-item_H swiper-tab-list {{currentTab==3?'on':''}}" data-current="3" bindtap="swichNav" hover-class="eee">已发货</view>
      <view class="scroll-view-item_H swiper-tab-list {{currentTab==4?'on':''}}" data-current="4" bindtap="swichNav" hover-class="eee">已完成</view>
    </scroll-view>
      
    <!-- 选项卡内容 -->
    <swiper current="{{currentTab}}" class="swiper-box" duration="300" bindchange="bindChange" style="height:{{clientHeight?clientHeight+'px':'auto'}}">  
        <!-- 全部订单 内容 --> 
      <swiper-item>  
        <scroll-view scroll-y="{{true}}" style="height: {{clientHeight?clientHeight+'px':'auto'}}">
          <view class="kong"></view>
          <!--写入显示内容  -->
          <view class="list" wx:for="{{carts}}" wx:key="*this">
            <!-- 图片 -->
            <view class="pic">
              <image src="{{item.imgurl}}"></image>
            </view>
            <!-- 类型表述 -->
            <view class="con">
              <text class="type1">{{item.type1}}</text>
              <text class="type2">{{item.type2}}</text>
            </view>
            <!-- 价格 -->
            <view class="price">
              <text class="price1">¥{{item.price}}</text>
              <text class="number">×{{item.num}}</text>
            </view>
          </view>
        </scroll-view>
      </swiper-item>  
        <!-- 待付款 内容 --> 
      <swiper-item>  
        <scroll-view scroll-y="{{true}}" style="height: {{clientHeight?clientHeight+'px':'auto'}}">
          <view class="kong"></view>
          <!--写入显示内容  -->
          <view class="list" wx:for="{{carts}}" wx:key="*this">
            <!-- 图片 -->
            <view class="pic">
              <image src="{{item.imgurl}}"></image>
            </view>
            <!-- 类型表述 -->
            <view class="con">
              <text class="type1">{{item.type1}}</text>
              <text class="type2">{{item.type2}}</text>
            </view>
            <!-- 价格 -->
            <view class="price">
              <text class="price1">¥{{item.price}}</text>
              <text class="number">×{{item.num}}</text>
            </view>
          </view>
        

    转载于:https://www.cnblogs.com/changk/p/9236116.html

    展开全文
  • 在同一个页面内实现不同展示页面的切换功能,如下图所示 二、代码实现 1. index.js Page({ /** * 页面的初始数据 */ data: { currentData : 0, }, /** * 生命周期函数--监听页面加载 *...
  • 微信小程序开发中窗口底部tab栏切换页面很简单很方便. 代码: 1.app.json //app.json { "pages":[ "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", ...
  • 微信小程序之选项卡 窗口顶部TabBar页面切换 最近在做小程序相关的开发,用到了类似某宝类似的滑动tabBar实现页面的切换,在网上看到的大多资料鱼龙混杂、模糊不清、有的还不能高度自适应,所以自己实现了一下; 好...
  • 最近一个人负责公司的微信小程序项目,项目做完了,给大家分享一点开发中遇到的坑已经常用的组件,话不多说,今天分享TAB选项卡!1、先看效果:2、wxml代码<view class='container'> <view class='tabbox'&...
  • 微信小程序开发选项卡.在android中选项卡一般用fragment,到了小程序这里瞬间懵逼了. 总算做出来了.分享出来看看. 先看效果: 再上代码: 1.index.wxml [html] view plain copy   view class=...
  • 小程序开发中,有很多封装好的控件供开发者使用,但是,很常见的tab选项卡居然没有,只能自己搞一个。 实现原理也很简单,无非是用给view(tab)设置一个点击事件bintap,并且给view(tab)一个data-idx索引,根据当前...
  • 一 wxml <view class="content"> <view class="menu"> <text class='menuTitle {{ind=="0"?"borders":""}}' data-index="0" catchtap="title">第一项</text>...text cl...
  • 微信小程序开发选项卡.在Android中选项卡一般用fragment,到了小程序这里瞬间懵逼了. 总算做出来了.分享出来看看. 先看效果: 再上代码: 1.index.wxml [html] view plain copy print? ...
  • 先看效果: 再上代码: 1.index.wxml [html] view plain copy   view class="swiper-tab">   view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bi
  • 该功能实现依赖于 微信小程序 模板容器 swiper,及其提供的属性方法;具体实现如下:上代码index.wxml&lt;!--pages/index/index.wxml--&gt; &lt;view class="page"&gt; &lt;!-- &...
  • 微信开发之JSSDK调用

    2016-11-22 17:03:13
    由于项目需要,需要接触微信开发,并要调用微信的JS-SDK里面的接口。 因为经验缺乏,我百度一下关于微信开发的资料,但收集的资料都不尽人意。网上的主流的微信开发是采用PHP开发的,而本人学的Java。所以对PHP微信...
  • 最终效果如上。问题: 1、tab标题总共8个,所以一屏无法全部显示。 2、tab内容区左右滑动切换时,tab标题随即做标记(active)。 3、当active的标题不在当前屏显示时,要使其能显示到当前屏中。...
1 2 3 4 5 ... 20
收藏数 4,360
精华内容 1,744
关键字:

微信开发页面 选项卡