小程序页面顶部选项卡效果

原创 2018年04月17日 01:07:23

效果图:

效果图

github源码下载

<!--index.wxml-->  
<view class="swiper-tab" >  
    <view bindtap="swithNav" wx:for="{{tabCont}}" wx:key="item.index" class="swiper-tab-list {{currentTab==item.index?'active':''}}" data-current='{{item.index}}' >{{item.title}}</view>  
</view>  
<swiper class="swiper-box" current="{{currentTab}}" duration="300" style="height:400px" bindchange="GetCurrentTab" data-current='6' >  
    <swiper-item wx:for="{{tabCont}}" wx:key="item.index">  
      <image src='{{item.pic}}'></image>
      <view>{{item.title}}</view>
    </swiper-item>  
</swiper>  
/**index.wxss**/

/**index.wxss**/

.swiper-tab {
  line-height: 80rpx;
  border: 1px solid #ccc;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.swiper-tab-list {
  font-size: 30rpx;
  color: #777;
  text-align: center;
}

.active {
  color: #da7c0c;
  border-bottom: 5rpx solid #da7c0c;
}

.swiper-box {
  display: block;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.swiper-box view {
  text-align: center;
}

image {
  width: 100%;
}
Page({

  /**
   * 页面的初始数据
   */
  data: {
    currentTab:0,
    tabCont: [{ "title": "tab1", "pic": "../../img/1.jpg", "index": "0" }, { "title": "tab2", "pic": "../../img/2.jpg", "index": "1" }, { "title": "tab3", "pic": "../../img/3.jpg", "index": "2" }, { "title": "tab4", "pic": "../../img/2.jpg", "index": "3" }, { "title": "tab5", "pic": "../../img/2.jpg", "index": "4" }, { "title": "tab6", "pic": "../../img/2.jpg", "index": "5" }, { "title": "tab7", "pic": "../../img/2.jpg", "index": "6" }, { "title": "tab8", "pic": "../../img/2.jpg", "index": "7" }, { "title": "tab9", "pic": "../../img/2.jpg", "index": "8" }],
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

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

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },
  // swiper滑动时触发bindchange事件,获取事件对象e获取当前所在滑块的 index,并将其更新至data的currentTab中,视图渲染通过判断currentTab的让对应的tab hover。
  GetCurrentTab:function(e){
    console.log(e.detail.current);
    var that = this;
    this.setData({
      currentTab:e.detail.current
    });
    // console.log("11111"+this.data.currentTab);
  },
  swithNav:function(e){
    var that = this;
   that.setData({
     currentTab:e.target.dataset.current
   });

  }
})
版权声明:本文为博主原创文章,转载请注明出处,谢谢! https://blog.csdn.net/jackie_bobo/article/details/79968961

CVI 常见错误

.NET and ActiveX 165495 — Installing an application that uses ActiveX controls to a cle...
  • shengzhuzhu
  • shengzhuzhu
  • 2014-06-29 14:08:09
  • 21348

微信小程序滚动Tab选项卡:左右可滑动切换

最终效果如上。问题: 1、tab标题总共8个,所以一屏无法全部显示。 2、tab内容区左右滑动切换时,tab标题随即做标记(active)。 3、当active的标题不在当前屏显示时...
  • Sophie_U
  • Sophie_U
  • 2017-05-12 16:10:40
  • 23503

微信小程序仿闲鱼『下拉菜单』

https://gold.xitu.io/user/58277c482f301e00584f3ecf下拉菜单我们非常常见了,但是要在微信小程序中实现并不容易,今天带来的是仿闲鱼下拉菜单,相信对您有一定...
  • sinat_17775997
  • sinat_17775997
  • 2016-12-13 11:52:43
  • 13385

微信小程序例子——下拉列表

微信小程序例子——下拉列表
  • FutrueJet
  • FutrueJet
  • 2016-10-05 21:19:46
  • 11210

[微信小程序]下拉菜单

动画效果是使用CSS3 @keyframes 规则(使 div 元素匀速向下移动) {{item}} > ...
  • qq_35713752
  • qq_35713752
  • 2017-12-04 16:07:13
  • 3900

微信小程序下拉菜单

效果如图所示 代码链接:https://github.com/herry-zhang/wxapp-selected
  • qq_27567859
  • qq_27567859
  • 2017-08-29 12:45:58
  • 1905

微信小程序之自定义抽屉菜单(从下拉出)实例 —— 微信小程序实战系列(7)

微信提供了动画api,就是下面这个 相关链接:https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-animation.html#wxcreatea...
  • michael_ouyang
  • michael_ouyang
  • 2017-03-09 10:02:50
  • 8916

微信小程序顶部下拉菜单栏

功能预览js代码var cityData = require('../../utils/city.js'); Page({ data: { //选择的终点城市暂存数据 endsel...
  • qq_31604363
  • qq_31604363
  • 2017-10-21 17:53:33
  • 2591

小程序开发中顶部导航栏的实现

11 22 33 44 55 我是哈哈 ...
  • qq_27187991
  • qq_27187991
  • 2017-03-23 17:02:16
  • 1910

vue + element tab选项卡 实现。。。

template> div style="margin-top:10px;"> el-tabs type="card" @tab-click="handleClick"> el-tab-...
  • Healer_JJJ
  • Healer_JJJ
  • 2018-01-09 15:05:48
  • 933
收藏助手
不良信息举报
您举报文章:小程序页面顶部选项卡效果
举报原因:
原因补充:

(最多只允许输入30个字)