v0.1.1

[修复] navbar的样式按小程序的规范来重新编写

CHANGELOG.md

+#### v0.1.1 (2016-11-10)
+
+- [修复] navbar的样式按小程序的规范来重新编写
+
 #### v0.1.0 (2016-11-10)
 
 初始发布

dist/example/navbar/navbar.js

+var sliderWidth = 96; // 需要设置slider的宽度，用于计算中间位置
+
 Page({
     data: {
         tabs: ["选项一", "选项二", "选项三"],
-        activeIndex: "0"
+        activeIndex: "0",
+        sliderOffset: 0,
+        sliderLeft: 0
+    },
+    onLoad: function () {
+        var that = this;
+        wx.getSystemInfo({
+            success: function(res) {
+                that.setData({
+                    sliderLeft: (res.windowWidth / that.data.tabs.length - sliderWidth) / 2
+                });
+            }
+        });
     },
     tabClick: function (e) {
         this.setData({
+            sliderOffset: e.currentTarget.offsetLeft,
             activeIndex: e.currentTarget.id
         });
     }

dist/example/navbar/navbar.wxml

@@ -3,8 +3,11 @@
         <view class="weui-tab">
             <view class="weui-navbar">
                 <block wx:for-items="{{tabs}}" wx:key="{{index}}">
-                    <view id="{{index}}" class="weui-navbar__item {{activeIndex == index ? 'weui-bar__item_on' : ''}}" bindtap="tabClick">{{item}}</view>
+                    <view id="{{index}}" class="weui-navbar__item {{activeIndex == index ? 'weui-bar__item_on' : ''}}" bindtap="tabClick">
+                        <view class="weui-navbar__title">{{item}}</view>
+                    </view>
                 </block>
+                <view class="weui-navbar__slider" style="left: {{sliderLeft}}px; transform: translateX({{sliderOffset}}px); -webkit-transform: translateX({{sliderOffset}}px);"></view>
             </view>
             <view class="weui-tab__panel">
                 <view class="weui-tab__content" hidden="{{activeIndex != 0}}">选项一的内容</view>

dist/style/weui.wxss

@@ -896,7 +896,6 @@ icon {
   z-index: 500;
   top: 0;
   width: 100%;
-  background-color: #fafafa;
   border-bottom: 1rpx solid #CCCCCC;
 }
 .weui-navbar__item {
@@ -907,17 +906,33 @@ icon {
           flex: 1;
   padding: 13px 0;
   text-align: center;
-  font-size: 15px;
-  border-right: 1rpx solid #CCCCCC;
-}
-.weui-navbar__item:active {
-  background-color: #ededed;
+  font-size: 0;
 }
 .weui-navbar__item.weui-bar__item_on {
-  background-color: #eaeaea;
+  color: #1AAD19;
 }
-.weui-navbar__item:last-child:after {
-  display: none;
+.weui-navbar__slider {
+  position: absolute;
+  content: " ";
+  left: 0;
+  bottom: 0;
+  width: 6em;
+  height: 3px;
+  background-color: #1AAD19;
+  -webkit-transition: -webkit-transform .3s;
+  transition: -webkit-transform .3s;
+  transition: transform .3s;
+  transition: transform .3s, -webkit-transform .3s;
+}
+.weui-navbar__title {
+  display: inline-block;
+  font-size: 15px;
+  max-width: 8em;
+  width: auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-wrap: normal;
 }
 .weui-tab {
   position: relative;

dist/style/widget/weui-tab/weui-navbar.wxss

@@ -6,7 +6,6 @@
   z-index: 500;
   top: 0;
   width: 100%;
-  background-color: #fafafa;
   border-bottom: 1rpx solid #CCCCCC;
 }
 .weui-navbar__item {
@@ -17,15 +16,31 @@
           flex: 1;
   padding: 13px 0;
   text-align: center;
-  font-size: 15px;
-  border-right: 1rpx solid #CCCCCC;
-}
-.weui-navbar__item:active {
-  background-color: #ededed;
+  font-size: 0;
 }
 .weui-navbar__item.weui-bar__item_on {
-  background-color: #eaeaea;
+  color: #1AAD19;
 }
-.weui-navbar__item:last-child:after {
-  display: none;
+.weui-navbar__slider {
+  position: absolute;
+  content: " ";
+  left: 0;
+  bottom: 0;
+  width: 6em;
+  height: 3px;
+  background-color: #1AAD19;
+  -webkit-transition: -webkit-transform .3s;
+  transition: -webkit-transform .3s;
+  transition: transform .3s;
+  transition: transform .3s, -webkit-transform .3s;
+}
+.weui-navbar__title {
+  display: inline-block;
+  font-size: 15px;
+  max-width: 8em;
+  width: auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-wrap: normal;
 }

dist/style/widget/weui-tab/weui-tab.wxss

@@ -6,7 +6,6 @@
   z-index: 500;
   top: 0;
   width: 100%;
-  background-color: #fafafa;
   border-bottom: 1rpx solid #CCCCCC;
 }
 .weui-navbar__item {
@@ -17,17 +16,33 @@
           flex: 1;
   padding: 13px 0;
   text-align: center;
-  font-size: 15px;
-  border-right: 1rpx solid #CCCCCC;
-}
-.weui-navbar__item:active {
-  background-color: #ededed;
+  font-size: 0;
 }
 .weui-navbar__item.weui-bar__item_on {
-  background-color: #eaeaea;
+  color: #1AAD19;
 }
-.weui-navbar__item:last-child:after {
-  display: none;
+.weui-navbar__slider {
+  position: absolute;
+  content: " ";
+  left: 0;
+  bottom: 0;
+  width: 6em;
+  height: 3px;
+  background-color: #1AAD19;
+  -webkit-transition: -webkit-transform .3s;
+  transition: -webkit-transform .3s;
+  transition: transform .3s;
+  transition: transform .3s, -webkit-transform .3s;
+}
+.weui-navbar__title {
+  display: inline-block;
+  font-size: 15px;
+  max-width: 8em;
+  width: auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-wrap: normal;
 }
 .weui-tab {
   position: relative;

package.json

 {
   "name": "weui-wxss",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "weui-wxss",
   "main": "dist/app.wxss",
   "directories": {

src/example/navbar/navbar.js

+var sliderWidth = 96; // 需要设置slider的宽度，用于计算中间位置
+
 Page({
     data: {
         tabs: ["选项一", "选项二", "选项三"],
-        activeIndex: "0"
+        activeIndex: "0",
+        sliderOffset: 0,
+        sliderLeft: 0
+    },
+    onLoad: function () {
+        var that = this;
+        wx.getSystemInfo({
+            success: function(res) {
+                that.setData({
+                    sliderLeft: (res.windowWidth / that.data.tabs.length - sliderWidth) / 2
+                });
+            }
+        });
     },
     tabClick: function (e) {
         this.setData({
+            sliderOffset: e.currentTarget.offsetLeft,
             activeIndex: e.currentTarget.id
         });
     }

src/example/navbar/navbar.wxml

@@ -3,8 +3,11 @@
         <view class="weui-tab">
             <view class="weui-navbar">
                 <block wx:for-items="{{tabs}}" wx:key="{{index}}">
-                    <view id="{{index}}" class="weui-navbar__item {{activeIndex == index ? 'weui-bar__item_on' : ''}}" bindtap="tabClick">{{item}}</view>
+                    <view id="{{index}}" class="weui-navbar__item {{activeIndex == index ? 'weui-bar__item_on' : ''}}" bindtap="tabClick">
+                        <view class="weui-navbar__title">{{item}}</view>
+                    </view>
                 </block>
+                <view class="weui-navbar__slider" style="left: {{sliderLeft}}px; transform: translateX({{sliderOffset}}px); -webkit-transform: translateX({{sliderOffset}}px);"></view>
             </view>
             <view class="weui-tab__panel">
                 <view class="weui-tab__content" hidden="{{activeIndex != 0}}">选项一的内容</view>

src/style/widget/weui-tab/weui-navbar.wxss

 @import "../../base/fn.wxss";
 
+@weuiNavBarColor: #1AAD19;
 .weui-navbar {
     display: flex;
     position: absolute;
     z-index: 500;
     top: 0;
     width: 100%;
-    background-color: #fafafa;
     border-bottom: 1rpx solid #CCCCCC;
 }
 
@@ -16,20 +16,25 @@
     flex: 1;
     padding: 13px 0;
     text-align: center;
-    font-size: 15px;
-    border-right: 1rpx solid #CCCCCC;
-
-    &:active {
-        background-color: #ededed;
-    }
+    font-size: 0;
 
     &.weui-bar__item_on {
-        background-color: #eaeaea;
-    }
-
-    &:last-child {
-        &:after {
-            display: none;
-        }
+        color: @weuiNavBarColor;
     }
+}
+.weui-navbar__slider {
+    position: absolute;
+    content: " ";
+    left: 0;
+    bottom: 0;
+    width: 6em;
+    height: 3px;
+    background-color: @weuiNavBarColor;
+    transition: transform .3s;
+}
+.weui-navbar__title{
+    display: inline-block;
+    font-size: 15px;
+    max-width: 8em;
+    .ellipsis();
 }
\ No newline at end of file