2016-10-23 11:02:13 qq_31383345 阅读数 22914
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    27822 人正在学习 去看看 秦子恒

微信小程序开发中窗口底部tab栏切换页面很简单很方便.


代码:

1.app.json

//app.json
{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#999999",
    "navigationBarTitleText": "tab",
    "navigationBarTextStyle":"white"
  },
   "tabBar": {
    "color": "#ccc",
    "selectedColor": "#35495e",
    "borderStyle": "white",
    "backgroundColor": "#f9f9f9",
    "list": [
      {
        "text": "首页",
        "pagePath": "pages/index/index",
        "iconPath": "images/home.png",
        "selectedIconPath": "images/home-actived.png"
      },
      {
        "text": "目录",
        "pagePath": "pages/catalogue/catalogue",
        "iconPath": "images/note.png",
        "selectedIconPath": "images/note-actived.png"
      },
      {
        "text": "我的",
        "pagePath": "pages/mine/mine",
        "iconPath": "images/profile.png",
        "selectedIconPath": "images/profile-actived.png"
      }
    ]
  }
}
pagePath是页面路径.iconPath是图片路径,icon 大小限制为40kb.

selectedIconPath:选中时的图片路径,icon 大小限制为40kb

tab Bar的最多5个,最少2个.

在pages目录下写好页面即可切换.


http://blog.csdn.net/qq_31383345

2017-04-27 16:20:17 gao_xu_520 阅读数 830
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    27822 人正在学习 去看看 秦子恒

在pages文件里面创建swipertab文件夹


1.编写页面结构:swipertab.wxml

<!--swipertab.wxml-->
<view class="swiper-tab">  
    <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">tab一</view>  
    <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">tab二</view>  
    <view class="swiper-tab-list {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">tab三</view>  
</view>  
<swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 31}}px" bindchange="bindChange">  
    <!-- tab一 -->  
    <swiper-item>  
      <view>tab一</view>  
    </swiper-item>  
    <!-- tab二 -->  
    <swiper-item>  
      <view>tab二</view>  
    </swiper-item>  
    <!-- tab三 -->  
    <swiper-item>  
      <view>tab三</view>  
    </swiper-item>  
</swiper>  



2.设置数据:swipertab.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
			})
		}
	}
})



3.设置样式:swipertab.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;  
}  


4.头部标题修改:swipertab.json


{
    "navigationBarTitleText": "选项卡页面切换"
}

5.效果图


注意:因为文件名不是index,所以记得修改app.json文件(底下备注的地方),否则页面不会显示同时底部不会显示






2016-10-23 11:53:26 qq_31383345 阅读数 89038
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    27822 人正在学习 去看看 秦子恒

微信小程序开发中选项卡.在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


我的博客,欢迎批评!

2019-03-24 09:15:39 jiang18238032891 阅读数 278
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    27822 人正在学习 去看看 秦子恒

微信小程序之选项卡 窗口顶部TabBar页面切换

最近在做小程序相关的开发,用到了类似某宝类似的滑动tabBar实现页面的切换,在网上看到的大多资料鱼龙混杂、模糊不清、有的还不能高度自适应,所以自己实现了一下;
好了:上图
在这里插入图片描述

没什么好说的都是对一些基本的组件的应用直接上代码:
1.wxml

<view class='container'>
  <view class='orderlength' >
    <view class='protab swiper-tab'>
    //可以根据自己的需求添加
      <view class="swiper-tab-item {{currentTab==0 ? 'active' : ''}}" data-current="0" bindtap="swichNav">销售中</view>
      <view class="swiper-tab-item {{currentTab==1 ? 'active' : ''}}" data-current="1" bindtap="swichNav">审核中</view>
      <view class="swiper-tab-item {{currentTab==2 ? 'active' : ''}}" data-current="2" bindtap="swichNav">已下架</view>

    </view>
    <view class='order-itembox'>
      <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='order-item' wx:for="{{order}}" wx:for-item="item" wx:key="index" id='{{item.id}}'> 
            第一个页面的数据
           </view> 
          </scroll-view>
        </swiper-item>
        <swiper-item>
          <scroll-view scroll-y="{{true}}" style="height: {{clientHeight?clientHeight+'px':'auto'}}">
            <view class='order-item' wx:for="{{order}}" wx:for-item="item" wx:key="index" wx:if="{{item.status==0}}">
              第二个页面的数据
            </view>
          </scroll-view>
        </swiper-item>
        <swiper-item>
          <scroll-view scroll-y="{{true}}" style="height: {{clientHeight?clientHeight+'px':'auto'}}">
            <view class='order-item' wx:for="{{order}}" wx:for-item="item" wx:key="index" wx:if="{{item.status==1}}">
              第三个页面的数据
            </view>
          </scroll-view>
        </swiper-item>
      </swiper>
      </view>
    </view>

2.wxss

.swiper-box {
  width: 100%;
}
.orderlength{width:100%}
.order-itembox {
  width: 100%;
}

.swiper-tab {
  width: 100%;
  display: -webkit-flex;
  display: flex;

  background: #fff;
}

.swiper-tab .swiper-tab-item {
  -webkit-box-flex: 1;
  flex: 1;
  text-align: center;
  line-height: 80rpx;
  font-size: 32rpx;
   position:relative;
}

.swiper-tab  .active {
  color: red;

}
.swiper-tab  .active::after{
  display:block;
  content:'';
  width:100%;
  height:6rpx;
  background:red;
  position:absolute;
  bottom:0;
}

3.js

Page({
  onLoad() {
    var that = this;
    wx.getSystemInfo({
      success: function(res) {
        that.setData({
          clientHeight: res.windowHeight
        });
      }
    })
  },
  data: {
    winWidth: 0,
    winHeight: 0,
    // tab切换
    currentTab: 0,
    order: [],
    orderlist: {},
  },
  bindChange: function(e) {
    console.log("滑动切换会触发的事件")
    var that = this;
    that.setData({
      currentTab: e.detail.current
    });
  },
  swichNav: function(e) {
    console.log("点击上方选项卡触发的事件")
    var that = this;
    if (this.data.currentTab === e.target.dataset.current) {
      return false;
    } else {
      that.setData({
        currentTab: e.target.dataset.current
      })
    }
  }
})

OK,到此结束,如有不足之处,评论讨论哦、、、、、

2018-03-17 18:39:04 qq_22056455 阅读数 571
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    27822 人正在学习 去看看 秦子恒

另外一种在代码中添加导航栏的方式


用循环模式来获取导航

<view class='navbar-tab'>
   <!-- 导航栏 -->
   <view wx:for='{{navbardata}}' data-currentId="{{index}}" class="navbar-swiper {{currentTab==index?'active':''}}" bindtap='swichNav' >
   {{item}}
   </view>
</view>
<!-- 内容 -->
<swiper current='{{currentTab}}' duration='300' bindchange='bindChange'>
    <swiper-item>
       <view>aaa</view>
    </swiper-item>
     <swiper-item>
       <view>bbb</view>
    </swiper-item>
     <swiper-item>
       <view>ccc</view>
    </swiper-item>
</swiper>

在data中添加数组即可

 navbardata: ["一", "二","三"],
  //滑动      
  bindChange:function(e){
    this.setData({ currentTab: e.detail.current})
  },
  //点击导航
  swichNav:function(e){
    //wxml添加个data-currentId自定义属性
    this.setData({ currentTab: e.target.dataset.currentid})
  }


没有更多推荐了,返回首页