mirror of
https://github.com/weilanwl/coloruicss.git
synced 2026-03-14 03:54:00 +08:00
v2.0.2
v2.0.2 2.0版本上线
This commit is contained in:
16
demo/pages/component/nav/nav.js
Normal file
16
demo/pages/component/nav/nav.js
Normal file
@@ -0,0 +1,16 @@
|
||||
const app = getApp();
|
||||
Page({
|
||||
data: {
|
||||
StatusBar: app.globalData.StatusBar,
|
||||
CustomBar: app.globalData.CustomBar,
|
||||
TabCur: 0,
|
||||
scrollLeft:0
|
||||
},
|
||||
tabSelect(e) {
|
||||
console.log(e);
|
||||
this.setData({
|
||||
TabCur: e.currentTarget.dataset.id,
|
||||
scrollLeft: (e.currentTarget.dataset.id-1)*60
|
||||
})
|
||||
}
|
||||
})
|
||||
1
demo/pages/component/nav/nav.json
Normal file
1
demo/pages/component/nav/nav.json
Normal file
@@ -0,0 +1 @@
|
||||
{}
|
||||
87
demo/pages/component/nav/nav.wxml
Normal file
87
demo/pages/component/nav/nav.wxml
Normal file
@@ -0,0 +1,87 @@
|
||||
<custom style="height:{{CustomBar}}px;">
|
||||
<bar class="fixed gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
|
||||
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
|
||||
<icon class='icon-back' /> 导航栏
|
||||
</navigator>
|
||||
</bar>
|
||||
</custom>
|
||||
<view wx:for="{{10}}" wx:key wx:if="{{index==TabCur}}" class='bg-grey padding margin text-center'>
|
||||
Tab{{index}}
|
||||
</view>
|
||||
<bar class="solid-bottom">
|
||||
<view class='action'>
|
||||
<icon class='icon-titles text-orange ' /> 默认
|
||||
</view>
|
||||
</bar>
|
||||
<scroll-view scroll-x class="bg-white nav" scroll-with-animation scroll-left="{{scrollLeft}}">
|
||||
<item class="{{index==TabCur?'text-green cur':''}}" wx:for="{{10}}" wx:key bindtap='tabSelect' data-id="{{index}}">
|
||||
Tab{{index}}
|
||||
</item>
|
||||
</scroll-view>
|
||||
|
||||
<bar class="margin-top solid-bottom">
|
||||
<view class='action'>
|
||||
<icon class='icon-title text-orange' /> 居中
|
||||
</view>
|
||||
</bar>
|
||||
<scroll-view scroll-x class="bg-white nav text-center">
|
||||
<item class="{{index==TabCur?'text-blue cur':''}}" wx:for="{{3}}" wx:key bindtap='tabSelect' data-id="{{index}}">
|
||||
Tab{{index}}
|
||||
</item>
|
||||
</scroll-view>
|
||||
|
||||
<bar class="margin-top solid-bottom">
|
||||
<view class='action'>
|
||||
<icon class='icon-title text-orange' /> 平分
|
||||
</view>
|
||||
</bar>
|
||||
<scroll-view scroll-x class="bg-white nav">
|
||||
<view class='flex text-center'>
|
||||
<item class="flex-sub {{index==TabCur?'text-orange cur':''}}" wx:for="{{4}}" wx:key bindtap='tabSelect' data-id="{{index}}">
|
||||
Tab{{index}}
|
||||
</item>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<bar class="margin-top solid-bottom">
|
||||
<view class='action'>
|
||||
<icon class='icon-title text-orange' /> 背景
|
||||
</view>
|
||||
</bar>
|
||||
<scroll-view scroll-x class="bg-red nav text-center">
|
||||
<item class="{{index==TabCur?'text-white cur':''}}" wx:for="{{3}}" wx:key bindtap='tabSelect' data-id="{{index}}">
|
||||
Tab{{index}}
|
||||
</item>
|
||||
</scroll-view>
|
||||
<bar class="margin-top solid-bottom">
|
||||
<view class='action'>
|
||||
<icon class='icon-title text-orange' /> 图标
|
||||
</view>
|
||||
</bar>
|
||||
<scroll-view scroll-x class="bg-green nav text-center">
|
||||
<item class="{{0==TabCur?'text-white cur':''}}" bindtap='tabSelect' data-id="0">
|
||||
<icon class='icon-camerafill'></icon> 数码
|
||||
</item>
|
||||
<item class="{{1==TabCur?'text-white cur':''}}" bindtap='tabSelect' data-id="1">
|
||||
<icon class='icon-upstagefill'></icon> 排行榜
|
||||
</item>
|
||||
<item class="{{2==TabCur?'text-white cur':''}}" bindtap='tabSelect' data-id="2">
|
||||
<icon class='icon-clothesfill'></icon> 皮肤
|
||||
</item>
|
||||
</scroll-view>
|
||||
|
||||
<bar class="margin-top solid-bottom">
|
||||
<view class='action'>
|
||||
<icon class='icon-title text-orange' /> 定位
|
||||
</view>
|
||||
</bar>
|
||||
<scroll-view scroll-x class="bg-green nav text-center">
|
||||
<item class="{{0==TabCur?'text-white cur':''}}" bindtap='tabSelect' data-id="0">
|
||||
<icon class='icon-camerafill'></icon> 数码
|
||||
</item>
|
||||
<item class="{{1==TabCur?'text-white cur':''}}" bindtap='tabSelect' data-id="1">
|
||||
<icon class='icon-upstagefill'></icon> 排行榜
|
||||
</item>
|
||||
<item class="{{2==TabCur?'text-white cur':''}}" bindtap='tabSelect' data-id="2">
|
||||
<icon class='icon-clothesfill'></icon> 皮肤
|
||||
</item>
|
||||
</scroll-view>
|
||||
1
demo/pages/component/nav/nav.wxss
Normal file
1
demo/pages/component/nav/nav.wxss
Normal file
@@ -0,0 +1 @@
|
||||
/* pages/component/nav/nav.wxss */
|
||||
Reference in New Issue
Block a user