一个菜鸟的互联网技术分享博客
您的位置: 主页 > 微信小程序---tab切换
advertisement

微信小程序---tab切换

一个朋友在学小程序的时候问了我一个问题:小程序中怎么手写tab切换(当时就发了一个鄙视的图片给他),下面开始上代码了
wxml部分: 

  1. <scroll-view scroll-x="true" class="ip_tab_comtainer">  
  2.   <view class="ip_tab_comtainer_padd"></view>  
  3.   <block wx:for="{{ips}}" wx:for-item="ip" wx:key="{{ip.id}}">  
  4.     <view class="{{ip.isSelect?'ip_tab_item_s':'ip_tab_item_n'}}" bindtap="onIpItemClick" wx:key="{{ip.id}}" data-item="{{ip}}">  
  5.       {{ip.title}}  
  6.     </view>  
  7.   </block>  
  8.   <view class="ip_tab_comtainer_padd"></view>  
  9. </scroll-view>  
  10. <view class='content'>  
  11. {{content}}  
  12. </view>  
wxss部分:
  1. .ip_tab_comtainer {  
  2.   width: 100%;  
  3.   background-color: #F5F5F5;  
  4.   padding: 20rpx 0 0;  
  5.   white-space: nowrap;  
  6. }  
  7.   
  8. .ip_tab_comtainer_padd {  
  9.   display: inline-block;  
  10.   width: 24rpx;  
  11. }  
  12.   
  13. .ip_tab_item_s {  
  14.   display: inline-block;  
  15.   line-height: 40rpx;  
  16.   padding: 12rpx 32rpx;  
  17.   color: #91daf9;  
  18.   margin-right: 8rpx;  
  19.   margin-left: 8rpx;  
  20.   font-size: 28rpx;  
  21.    
  22.   overflow: hidden;  
  23.   
  24.   background-color: #ffffff;  
  25.    
  26.   border: 1px solid #91daf9;  
  27. }  
  28.   
  29. .ip_tab_item_n {  
  30.   display: inline-block;  
  31.   padding: 12rpx 32rpx;  
  32.   line-height: 40rpx;  
  33.   color: #353535;  
  34.   margin-right: 8rpx;  
  35.   background-color: #ffffff;  
  36.   margin-left: 8rpx;  
  37.   font-size: 28rpx;  
  38.   text-align: center;  
  39.   overflow: hidden;  
  40.   text-overflow: ellipsis;  
  41.   border-radius: 4rpx;  
  42.   border: 1px solid #CCCCCC;  
  43. }  
  44.   
  45. /** 
  46. 去除横向滚动条 
  47. */  
  48. ::-webkit-scrollbar {  
  49.   width: 0;  
  50.   height: 0;  
  51.   color: transparent;  
  52. }  
  53.   
  54. .content{  
  55. width: 100%;  
js部分:
  1. Page({  
  2.   /** 
  3.    * 页面的初始数据 
  4.    */  
  5.   data: {  
  6.     ips: [  
  7.       { id: "1", title: "tab切换一", isSelect:false },  
  8.       { id: "2", title: "tab切换二", isSelect: false},  
  9.       { id: "3", title: "tab切换三", isSelect: false},  
  10.        
  11.     ],  
  12.     content:"一开始加载全部数据"  
  13.   },  
  14.    
  15.   /** 
  16.    * 生命周期函数--监听页面加载 
  17.    */  
  18.   onLoad: function (options) {  
  19.    
  20.   },  
  21.    
  22.   /** 
  23.     * item点击事件 
  24.     */  
  25.   onIpItemClick: function (event) {  
  26.     console.log(event);  
  27.     var id = event.currentTarget.dataset.item.id;  
  28.     var curIndex = 0;  
  29.     for (var i = 0; i < this.data.ips.length; i++) {  
  30.       if (id == this.data.ips[i].id) {  
  31.         this.data.ips[i].isSelect = true;  
  32.         curIndex = i;  
  33.       } else {  
  34.         this.data.ips[i].isSelect = false;  
  35.       }  
  36.     }  
  37.    
  38.     this.setData({  
  39.       content: this.data.ips[curIndex].title,  
  40.       ips: this.data.ips,  
  41.     });  
  42.   },  
  43.    
  44. })  
就是这么的简单(^_^)
zhangren.online
上一篇:微信小程序中setData为数组动态赋值
下一篇:让原生小程序支持 async/await的runtime.js

您可能喜欢

回到顶部