Skip to content

M
mayi-mp-shop
Commit 43889e92 by 李嘉林
Options

横向标签

parent 49d9c61b
Showing with 510 additions and 90 deletions
src/components/basicTool/transverse-label/main.json 0 → 100644
{
"usingComponents": {
"van-tabs": "/static/vant/tabs/index",
"van-tab": "/static/vant/tab/index",
"banner": "/static/nativeComponents/Banner/index",
"goods-list": "/static/nativeComponents/GoodsList/index",
"time-limited-discount": "/static/nativeComponents/TimeLimitedDiscount/index",
"waterfall-flow": "/static/nativeComponents/module/WaterfallFlow/index",
"van-button": "/static/vant/button/index",
"area-navigation":"/static/nativeComponents/AreaNavigation/index",
"cube-nav":"/static/nativeComponents/CubeNav/index",
"float-button":"/static/nativeComponents/FloatButton/index",
"goods-search":"/static/nativeComponents/GoodsSearch/index",
"notice":"/static/nativeComponents/Notice/index",
"pop-up":"/static/nativeComponents/PopUp/index",
"share-popup":"/static/nativeComponents/SharePopup/index",
"speedy-nav":"/static/nativeComponents/SpeedyNav/index",
"video-player":"/static/nativeComponents/VideoPlayer/index"
},
"enablePullDownRefresh":true,
"styleIsolation": "apply-shared"
}
\ No newline at end of file
src/pages/home/index.vue
......@@ -66,6 +66,9 @@
<div v-if="item.componentCode == 'official-account' && item.componentInfo.visible == 1">
<official-account></official-account>
</div>
<div v-if="item.componentCode == 'transverse-label' && item.componentInfo.visible == 1">
<transverse-label :datas="item" :componentIndex="index"></transverse-label>
</div>
</div>
<bottomCont></bottomCont>
......@@ -95,6 +98,7 @@ import links from '@/components/basicTool/link/index.vue'
import interval from '@/components/basicTool/interval/index.vue'
import partition from '@/components/basicTool/partition/index.vue'
import shopPopup from '@/components/basicTool/shop-popup/index.vue'
import transverseLabel from '@/components/basicTool/transverse-label/index.vue'
import text from '@/components/content/text'
import imgText from '@/components/content/imgText'
import coupon from '@/components/activity/coupon'
......@@ -125,7 +129,8 @@ export default {
'text-text':text,
'img-text':imgText,
coupon,
integralTurntable
integralTurntable,
transverseLabel
},
onShareAppMessage(res) {
let shareVal={};
......
src/pages/home/main.json
{
"usingComponents": {
"van-tabs": "/static/vant/tabs/index",
"van-tab": "/static/vant/tab/index",
"banner": "/static/nativeComponents/Banner/index",
"goods-list": "/static/nativeComponents/GoodsList/index",
"time-limited-discount": "/static/nativeComponents/TimeLimitedDiscount/index",
......
static/nativeComponents/GoodsList/index.js
......@@ -19,7 +19,8 @@ const componentOptions = {
classificationLoadNum: 10,
queryProductInfoLoading: false,
loading: false,
finished: false
finished: false,
goodsList:[],
},
// 数据监听器
observers: {},
......@@ -32,9 +33,7 @@ const componentOptions = {
moved() {},
detached() {}
},
attached() {
},
attached() {},
definitionFilter() {},
// 页面生命周期
pageLifetimes: {
......@@ -226,7 +225,7 @@ const componentOptions = {
item.productImgUrl = DFSImg(item.productImgUrl, 400, 400, 1);
item.minPrice = Number(item.minPrice).toFixed(2);
item.qty = Number(item.qty);
item.saleQty = item.saleQty?Number(item.saleQty):1;
item.saleQty = item.saleQty ? Number(item.saleQty) : 1;
item.totalCollectionCount = Number(item.totalCollectionCount) || 0;
item.minPriceAfterRecommendedCardPriceTable = item.minPriceAfterRecommendedCardPriceTable
? Number(item.minPriceAfterRecommendedCardPriceTable)
......@@ -245,7 +244,8 @@ const componentOptions = {
}
});
this.setData({
"datas.componentData.goodsList": goodsList
"datas.componentData.goodsList": goodsList,
goodsList
});
if (type == 1) {
// 初始化
......@@ -342,7 +342,12 @@ const componentOptions = {
this.getProductList(1, 2);
},
viewMore() {
let { goodsType,style, categoryName, categoryId } = this.data.datas.componentData;
let {
goodsType,
style,
categoryName,
categoryId
} = this.data.datas.componentData;
let linkVal = "";
if (goodsType != 1) {
if (style == "list") {
......@@ -355,7 +360,7 @@ const componentOptions = {
}
$themeToLink({
type: 1,
link:linkVal,
link: linkVal
});
}
}
......
static/nativeComponents/GoodsList/index.wxml
......@@ -25,14 +25,14 @@
style="margin-left:{{-datas.componentData.proGap*2}}rpx;"
>
<view
wx:for="{{datas.componentData.goodsList}}"
wx:for="{{goodsList}}"
wx:key="index"
class="goods-item"
style="width:{{100/datas.componentData.columnNum}}%;padding-left:{{datas.componentData.proGap*2}}rpx"
>
<goods-item
datas="{{datas}}"
items="{{datas.componentData.goodsList[index]}}"
items="{{goodsList[index]}}"
indexs="{{index}}"
></goods-item>
</view>
......
static/nativeComponents/TimeLimitedDiscount/index.js
......@@ -123,15 +123,22 @@ const componentOptions = {
days: 0,
hours: 0,
minute: 0,
second: 0
second: 0,
goodsList:[],
},
// 数据监听器
observers: {},
// 组件方法
methods: {
init() {
let { goodsList, activityCode, selectActivityValue, dimension } = this.data.datas.componentData;
let {
goodsList,
activityCode,
selectActivityValue,
dimension
} = this.data.datas.componentData;
let { deleteFlag, endTimeData } = this.data;
let _this = this;
if (activityCode == "") {
return;
}
......@@ -146,13 +153,14 @@ const componentOptions = {
if (dimension == 0 && copyData.goodsItems.length == 0) {
deleteFlag = true;
}
endTimeData = new Date(copyData.endTime.replace(/-/g, "/")).getTime() - new Date().getTime();
endTimeData =
new Date(copyData.endTime.replace(/-/g, "/")).getTime() -
new Date().getTime();
console.log(endTimeData, "----------------------150");
this.setData({ endTime: endTimeData });
let _this = this;
this.setData({ deleteFlag });
console.log("------------155")
console.log("------------155");
// setTimeout(() => {
// xcsoft.countdown(_this.data.datas.componentData.endTime, function (time) {
// console.log("--------------157")
......@@ -171,10 +179,11 @@ const componentOptions = {
// }, 100);
copyData.goodsItems.forEach((item, index) => {
item.productImgUrl = DFSImg(item.imgUrl);
item.productImgUrl1 = DFSImg(item.imgUrl);
item.minPrice = parseFloat(item.discountPrice);
item.maxPrice = parseFloat(item.salePrice);
});
this.setData({
_this.setData({
goodsList: copyData.goodsItems,
selectActivityValue: copyData.singleItemActivityName
});
......@@ -191,30 +200,44 @@ const componentOptions = {
});
}
if (ids.length == 0) {
this.setData({ isLoading:false });
this.setData({ isLoading: false });
return;
}
promoteApi.query_single_item_activity_list_by_ids(ids).then(res => {
if (res.data.code == 200) {
let list = res.data.data ||[];
let list = res.data.data || [];
if (list.length > 0) {
let hideNum = 0;
list.forEach((item, index) => {
if (new Date(item.endTime.replace(/-/g, "/")).getTime() - new Date().getTime() <= 0) {
if (
new Date(item.endTime.replace(/-/g, "/")).getTime() -
new Date().getTime() <=
0
) {
item.isEnd = true;
hideNum += 1;
} else {
item.isEnd = false;
}
item.startTimeTimeStamp = new Date(item.startTime.replace(/-/g, "/")).getTime() - new Date().getTime();
item.endTimeTimeStamp = new Date(item.endTime.replace(/-/g, "/")).getTime() - new Date().getTime();
item.singleItemActivityCoverImage = DFSImg(item.singleItemActivityCoverImage);
item.isStart = new Date(item.startTime.replace(/-/g, "/")).getTime() > new Date().getTime() ? true : false;
console.log(item.isEnd,'-----------------------213');
})
item.startTimeTimeStamp =
new Date(item.startTime.replace(/-/g, "/")).getTime() -
new Date().getTime();
item.endTimeTimeStamp =
new Date(item.endTime.replace(/-/g, "/")).getTime() -
new Date().getTime();
item.singleItemActivityCoverImage = DFSImg(
item.singleItemActivityCoverImage
);
item.isStart =
new Date(item.startTime.replace(/-/g, "/")).getTime() >
new Date().getTime()
? true
: false;
console.log(item.isEnd, "-----------------------213");
});
this.setData({ "datas.componentData.actList": list });
if (hideNum == actList.length) {
this.setData({ hideAll:true });
this.setData({ hideAll: true });
}
}
}
......@@ -224,12 +247,28 @@ const componentOptions = {
this.setData({ timeData: e.detail });
},
onclickProduct(e) {
console.log(e.currentTarget.dataset.items,'-------------------------226');
let { terminalProductId, terminalGoodsMixId, productId } = e.currentTarget.dataset.items;
$themeToLink({ type: 1, link: `/goods/${productId}?limitedLime=true&endTime=${this.data.datas.componentData.endTime}&terminalProductId="${terminalProductId}&terminalGoodsMixId=${terminalGoodsMixId}` });
console.log(
e.currentTarget.dataset.items,
"-------------------------226"
);
let {
terminalProductId,
terminalGoodsMixId,
productId
} = e.currentTarget.dataset.items;
$themeToLink({
type: 1,
link: `/goods/${productId}?limitedLime=true&endTime=${
this.data.datas.componentData.endTime
}&terminalProductId="${terminalProductId}&terminalGoodsMixId=${terminalGoodsMixId}`
});
},
onclickOrder(e) {
let { terminalGoodsMixId, terminalGoodsId, goodsId } = e.currentTarget.dataset.items;
let {
terminalGoodsMixId,
terminalGoodsId,
goodsId
} = e.currentTarget.dataset.items;
$themeToLink({
type: 1,
link: `/order/orderConfirm?productGoodsMixId=${terminalGoodsMixId}&productGoodsId=${terminalGoodsId}&goodsId=${goodsId}&qty=1&goodsString=null`
......
static/nativeComponents/TimeLimitedDiscount/index.wxml
......@@ -44,11 +44,11 @@
<view
class="goodsPicture"
bindtap="onclickProduct"
data-items="{{datas.componentData.goodsList[index]}}"
data-items="{{goodsList[index]}}"
style="padding:{{datas.componentData.imgSize}}"
>
<image mode="widthFix" src="{{datas.componentData.goodsList[index]['productImgUrl']}}"></image>
<view class="whiteBg" wx:if="{{datas.componentData.goodsList[index].oversoldFlag==0&&datas.componentData.goodsList[index].saleQty-0<=0}}">
<image mode="widthFix" src="{{goodsList[index]['productImgUrl1']}}"></image>
<view class="whiteBg" wx:if="{{goodsList[index].oversoldFlag==0&&datas.componentData.goodsList[index].saleQty-0<=0}}">
<view class="cover">
<text>商品</text>
<text>售罄</text>
......@@ -58,20 +58,20 @@
</view>
<view class="info">
<view class="name">
{{datas.componentData.goodsList[index]!=null?datas.componentData.goodsList[index]['productName']:'名称'}}
{{goodsList[index]!=null?goodsList[index]['productName']:'名称'}}
</view>
<view class="allPrice">
<view>
<!-- <text class="price" wx:if="{{((hours-0)+(minute-0)+(second-0))!=0}}">￥{{datas.componentData.goodsList[index]!=null?datas.componentData.goodsList[index]['minPrice']:0}}</text>
<text class="price" wx:else>￥{{datas.componentData.goodsList[index]!=null?datas.componentData.goodsList[index]['minPrice']:0}}</text>
<text class="delPrice" wx:if="{{((hours-0)+(minute-0)+(second-0))!=0}}">￥{{datas.componentData.goodsList[index]!=null?datas.componentData.goodsList[index]['maxPrice']:0}}</text> -->
<view class="price">￥{{datas.componentData.goodsList[index]!=null?datas.componentData.goodsList[index]['minPrice']:0}}</view>
<view class="delPrice">￥{{datas.componentData.goodsList[index]!=null?datas.componentData.goodsList[index]['maxPrice']:0}}</view>
<view class="price">￥{{goodsList[index]!=null?goodsList[index]['minPrice']:0}}</view>
<view class="delPrice">￥{{goodsList[index]!=null?goodsList[index]['maxPrice']:0}}</view>
</view>
<view
class="btn"
style="background:#333;"
data-items="{{datas.componentData.goodsList[index]}}"
data-items="{{goodsList[index]}}"
catchtap="onclickOrder"
>
立即抢购
......@@ -86,20 +86,20 @@
<view class="goods1" wx:elif="{{datas.componentData.style==='across'}}">
<view
class="goods-item"
wx:for="{{datas.componentData.goodsList}}"
wx:for="{{goodsList}}"
wx:key="index"
>
<view class="items">
<view class="imgBox slidebox2">
<view
class="goodsPicture"
wx:if="{{datas.componentData.goodsList[index]!=null}}"
wx:if="{{goodsList[index]!=null}}"
style="padding:{{datas.componentData.imgSize}}"
data-items="{{datas.componentData.goodsList[index]}}"
data-items="{{goodsList[index]}}"
bindtap="onclickProduct"
>
<image mode="widthFix" src="{{datas.componentData.goodsList[index]['productImgUrl']}}"></image>
<view class="whiteBg" wx:if="{{datas.componentData.goodsList[index].oversoldFlag==0&&datas.componentData.goodsList[index].saleQty-0<=0}}">
<image mode="widthFix" src="{{goodsList[index]['productImgUrl']}}"></image>
<view class="whiteBg" wx:if="{{goodsList[index].oversoldFlag==0&&goodsList[index].saleQty-0<=0}}">
<view class="cover">
<text>商品</text>
<text>售罄</text>
......@@ -111,8 +111,8 @@
<!-- <text class="price" wx:if="{{((hours-0)+(minute-0)+(second-0))!=0}}">￥{{datas.componentData.goodsList[index]!=null?datas.componentData.goodsList[index]['minPrice']:0}}</text>
<text class="price" wx:else>￥{{datas.componentData.goodsList[index]!=null?datas.componentData.goodsList[index]['minPrice']:0}}</text>
<text class="delPrice" wx:if="{{((hours-0)+(minute-0)+(second-0))!=0}}">￥{{datas.componentData.goodsList[index]!=null?datas.componentData.goodsList[index]['maxPrice']:0}}</text> -->
<view class="price">￥{{datas.componentData.goodsList[index]!=null?datas.componentData.goodsList[index]['minPrice']:0}}</view>
<view class="delPrice">￥{{datas.componentData.goodsList[index]!=null?datas.componentData.goodsList[index]['maxPrice']:0}}</view>
<view class="price">￥{{goodsList[index]!=null?goodsList[index]['minPrice']:0}}</view>
<view class="delPrice">￥{{goodsList[index]!=null?goodsList[index]['maxPrice']:0}}</view>
</view>
</view>
</view>
......
static/nativeComponents/TransverseLabel/ComponentsList/index.js 0 → 100644
const componentOptions = {
// 组件选项
options: {
multipleSlots: true
},
behaviors: [],
properties: {
datas: {
type: Object
}
},
// 组件数据
data: {
isPageHidden: false // 页面是否处于隐藏状态
},
// 数据监听器
observers: {},
// 组件方法
methods: {
init() {}
},
// 组件生命周期
lifetimes: {
created() {},
attached() {
this.init();
},
ready() {},
moved() {},
detached() {}
},
definitionFilter() {},
// 页面生命周期
pageLifetimes: {
// 页面被展示
show() {
const { isPageHidden } = this.data;
// show事件发生前，页面不是处于隐藏状态时
if (!isPageHidden) {
return;
}
// 重新执行定时器等操作
},
// 页面被隐藏
hide() {
this.setData({
isPageHidden: true
});
// 清除定时器等操作
},
// 页面尺寸变化时
resize() {}
}
};
Component(componentOptions)
static/nativeComponents/TransverseLabel/ComponentsList/index.json 0 → 100644
{
"component": true,
"usingComponents": {
"banner": "/static/nativeComponents/Banner/index",
"goods-list": "/static/nativeComponents/GoodsList/index",
"time-limited-discount": "/static/nativeComponents/TimeLimitedDiscount/index",
"waterfall-flow": "/static/nativeComponents/module/WaterfallFlow/index",
"van-button": "/static/vant/button/index",
"area-navigation": "/static/nativeComponents/AreaNavigation/index",
"cube-nav": "/static/nativeComponents/CubeNav/index",
"float-button": "/static/nativeComponents/FloatButton/index",
"goods-search": "/static/nativeComponents/GoodsSearch/index",
"notice": "/static/nativeComponents/Notice/index",
"pop-up": "/static/nativeComponents/PopUp/index",
"share-popup": "/static/nativeComponents/SharePopup/index",
"speedy-nav": "/static/nativeComponents/SpeedyNav/index",
"video-player": "/static/nativeComponents/VideoPlayer/index",
"transverse-label": "/static/nativeComponents/TransverseLabel/index"
}
}
\ No newline at end of file
static/nativeComponents/TransverseLabel/ComponentsList/index.wxml 0 → 100644
<!-- 组件集合 -->
<view class="ComponentsList">
<block wx:for="{{datas}}">
<block wx:if="{{item.componentCode=='banner' && item.componentInfo.visible == 1}}">
<banner datas="{{item}}"></banner>
</block>
<block wx:elif="{{item.componentCode=='goods-list' && item.componentInfo.visible == 1}}">
<goods-list class="goodsListItem" datas="{{item}}"></goods-list>
</block>
<block wx:elif="{{item.componentCode=='area-navigation' && item.componentInfo.visible == 1}}">
<area-navigation datas="{{item}}" :changeLocation="changeLocation"></area-navigation>
</block>
<block wx:elif="{{item.componentCode=='cube-nav' && item.componentInfo.visible == 1}}">
<cube-nav datas="{{item}}"></cube-nav>
</block>
<block wx:elif="{{item.componentCode=='time-limited-discount' && item.componentInfo.visible == 1}}">
<time-limited-discount datas="{{item}}"></time-limited-discount>
</block>
<block wx:elif="{{item.componentCode=='links' && item.componentInfo.visible == 1}}">
<links datas="{{item}}"></links>
</block>
<block wx:elif="{{item.componentCode=='interval' && item.componentInfo.visible == 1}}">
<interval datas="{{item}}"></interval>
</block>
<block wx:elif="{{item.componentCode=='partition' && item.componentInfo.visible == 1}}">
<partition datas="{{item}}"></partition>
</block>
<block wx:elif="{{item.componentCode=='shop-popup' && item.componentInfo.visible == 1}}">
<shop-popup datas="{{item}}"></shop-popup>
</block>
<block wx:elif="{{item.componentCode=='float-button' && item.componentInfo.visible == 1}}">
<float-button datas="{{item}}"></float-button>
</block>
<block wx:elif="{{item.componentCode=='text-text' && item.componentInfo.visible == 1}}">
<text-text datas="{{item}}"></text-text>
</block>
<block wx:elif="{{item.componentCode=='img-text' && item.componentInfo.visible == 1}}">
<img-text datas="{{item}}"></img-text>
</block>
<block wx:elif="{{item.componentCode=='goods-search' && item.componentInfo.visible == 1}}">
<goods-search datas="{{item}}"></goods-search>
</block>
<block wx:elif="{{item.componentCode=='notice' && item.componentInfo.visible == 1}}">
<notice datas="{{item}}"></notice>
</block>
<block wx:elif="{{item.componentCode=='pop-up' && item.componentInfo.visible == 1}}">
<pop-up datas="{{item}}"></pop-up>
</block>
<block wx:elif="{{item.componentCode=='coupon' && item.componentInfo.visible == 1}}">
<coupon datas="{{item}}"></coupon>
</block>
<block wx:elif="{{item.componentCode=='integral-turntable' && item.componentInfo.visible == 1}}">
<integralTurntable datas="{{item}}"></integralTurntable>
</block>
<block wx:elif="{{item.componentCode=='speedy-nav' && item.componentInfo.visible == 1}}">
<speedy-nav datas="{{item}}"></speedy-nav>
</block>
<block wx:elif="{{item.componentCode=='video-player' && item.componentInfo.visible == 1}}">
<video-player datas="{{item}}" :indexs="index"></video-player>
</block>
<block wx:elif="{{item.componentCode=='official-account' && item.componentInfo.visible == 1}}">
<official-account></official-account>
</block>
</block>
</view>
static/nativeComponents/TransverseLabel/index.js 0 → 100644
const componentOptions = {
// 组件选项
options: {
multipleSlots: true,
styleIsolation: "shared"
},
behaviors: [],
properties: {
datas: {
type: Object
}
},
// 组件数据
data: {
isPageHidden: false, // 页面是否处于隐藏状态
active: 0
},
// 数据监听器
observers: {},
// 组件方法
methods: {
init() {},
onChange(event) {}
},
// 组件生命周期
lifetimes: {
created() {},
attached() {
this.init();
},
ready() {},
moved() {},
detached() {}
},
definitionFilter() {},
// 页面生命周期
pageLifetimes: {
// 页面被展示
show() {
const { isPageHidden } = this.data;
// show事件发生前，页面不是处于隐藏状态时
if (!isPageHidden) {
return;
}
// 重新执行定时器等操作
},
// 页面被隐藏
hide() {
this.setData({
isPageHidden: true
});
// 清除定时器等操作
},
// 页面尺寸变化时
resize() {}
}
};
Component(componentOptions)
static/nativeComponents/TransverseLabel/index.json 0 → 100644
{
"component": true,
"usingComponents": {
"van-tabs":"/static/vant/tabs/index",
"van-tab":"/static/vant/tab/index",
"components-list":"./ComponentsList/index"
}
}
static/nativeComponents/TransverseLabel/index.wxml 0 → 100644
<view class="TransverseLabel" style="--defaultTabTextColor:{{datas.componentData.defaultTabTextColor}};--defaultTabTextSize:{{datas.componentData.defaultTabTextSize*2}}rpx;--defaultTabBackgroundColor:{{datas.componentData.defaultTabBackgroundColor}};--defaultTabUnderlineColor:{{datas.componentData.defaultTabUnderlineColor}};--selectTabTextColor:{{datas.componentData.selectTabTextColor}};--selectTabTextSize:{{datas.componentData.selectTabTextSize*2}}rpx;--selectTabBackgroundColor:{{datas.componentData.selectTabBackgroundColor}};--selectTabUnderlineColor:{{datas.componentData.selectTabUnderlineColor}};--tabBackgroundColor:{{datas.componentData.tabBackgroundColor}};">
<van-tabs
custom-class="vanTabs {{datas.componentData.tabStyle==1?'tabStyle1':'tabStyle2'}}"
nav-class="tabNav tabLayout{{datas.componentData.tabLayout}}"
tab-class="vanTab"
tab-active-class="vanActiveTab"
active="{{ active }}"
animated="{{true}}"
sticky="{{datas.componentData.stickyTop}}"
swipeable="{{true}}"
bind:change="onChange"
line-width="{{50}}"
color="{{'#333'}}"
>
<van-tab
title="{{item.title}}"
wx:for="{{datas.componentData.tabList}}"
wx:if="{{item.visible==undefined||item.visible==1}}"
>
<components-list datas="{{item.contentList}}"></components-list>
</van-tab>
</van-tabs>
</view>
static/nativeComponents/TransverseLabel/index.wxss 0 → 100644
.vanTabs{
position: relative;
}
.vanTab .van-ellipsis{
padding: 0 20rpx;
margin: 0 12rpx;
}
.van-tab {
position: relative;
z-index: 98;
}
/* 样式1 */
.tabStyle1 .van-tabs__line {
width: 100%;
height: 30px;
bottom: 7px;
border-radius: 38px;
}
.tabStyle1 .tabTitle {
color: var(--main-color);
}
.tabStyle1 .selectTitle {
color: #fff;
}
.tabStyle1 .defaultTabTextSize {
font-size: var(--defaultTabTextSize);
}
.tabStyle1 .defaultTabTextColor {
color: var(--defaultTabTextColor);
}
.tabStyle1 .selectTabTextSize {
font-size: var(--selectTabTextSize);
}
.tabStyle1 .selectTabTextColor {
color: var(--selectTabTextColor);
}
/* 样式2 */
.tabStyle2 .van-tabs__line{
}
/* 标签背景色 */
.tabNav {
background: var(--tabBackgroundColor);
}
/* 布局 */
.tabLayout1 .van-tab{
flex: none;
}
.tabLayout2{
justify-content: center;
}
.tabLayout2 .van-tab{
flex: none;
}
\ No newline at end of file
static/vant/tabs/index.js
......@@ -10,11 +10,11 @@ import {
import { isDef } from '../common/validator';
VantComponent({
mixins: [touch],
classes: ['nav-class', 'tab-class', 'tab-active-class', 'line-class'],
classes: ["nav-class", "tab-class", "tab-active-class", "line-class"],
relation: {
name: 'tab',
type: 'descendant',
current: 'tabs',
name: "tab",
type: "descendant",
current: "tabs",
linked(target) {
target.index = this.children.length - 1;
this.updateTabs();
......@@ -25,7 +25,7 @@ VantComponent({
return child;
});
this.updateTabs();
},
}
},
props: {
sticky: Boolean,
......@@ -40,16 +40,24 @@ VantComponent({
this.children.forEach((child, index) =>
child.updateRender(index === this.data.currentIndex, this)
);
},
}
},
lineWidth: {
type: [String, Number],
value: 40,
observer: 'resize',
// observer: "resize"
},
lineLengthType: {
type: [String, Number],
value: 1 // 1默认自适应 2短自适应 3 固定宽度取值lineWidth
},
linePosition: {
type: [String, Number],
value: 1 // 1默认右对齐 2居中 3铺满
},
lineHeight: {
type: [String, Number],
value: -1,
value: -1
},
active: {
type: [String, Number],
......@@ -58,41 +66,41 @@ VantComponent({
if (name !== this.getCurrentName()) {
this.setCurrentIndexByName(name);
}
},
}
},
type: {
type: String,
value: 'line',
value: "line"
},
ellipsis: {
type: Boolean,
value: true,
value: true
},
duration: {
type: Number,
value: 0.3,
value: 0.3
},
zIndex: {
type: Number,
value: 1,
value: 1
},
swipeThreshold: {
type: Number,
value: 5,
observer(value) {
this.setData({
scrollable: this.children.length > value || !this.data.ellipsis,
scrollable: this.children.length > value || !this.data.ellipsis
});
},
}
},
offsetTop: {
type: Number,
value: 0,
value: 0
},
lazyRender: {
type: Boolean,
value: true,
},
value: true
}
},
data: {
tabs: [],
......@@ -101,24 +109,35 @@ VantComponent({
currentIndex: 0,
container: null,
skipTransition: true,
lineOffsetLeft: 0,
lineOffsetLeft: 0
},
mounted() {
this.getElementInfo();
requestAnimationFrame(() => {
this.setData({
container: () => this.createSelectorQuery().select('.van-tabs'),
container: () => this.createSelectorQuery().select(".van-tabs")
});
this.resize(true);
this.scrollIntoView();
});
},
methods: {
getElementInfo() {
let that = this;
wx
.createSelectorQuery()
.in(this)
.selectAll(".van-tab")
.boundingClientRect()
.exec((rect = []) =>
that.triggerEvent("getEleInfo", { rect, vanTabsThis: this })
);
},
updateTabs() {
const { children = [], data } = this;
this.setData({
tabs: children.map((child) => child.data),
scrollable:
this.children.length > data.swipeThreshold || !data.ellipsis,
tabs: children.map(child => child.data),
scrollable: this.children.length > data.swipeThreshold || !data.ellipsis
});
this.setCurrentIndexByName(data.active || this.getCurrentName());
},
......@@ -131,18 +150,18 @@ VantComponent({
this.$emit(eventName, {
index: currentChild.index,
name: currentChild.getComputedName(),
title: currentChild.data.title,
title: currentChild.data.title
});
},
onTap(event) {
const { index } = event.currentTarget.dataset;
const child = this.children[index];
if (child.data.disabled) {
this.trigger('disabled', child);
this.trigger("disabled", child);
} else {
this.setCurrentIndex(index);
nextTick(() => {
this.trigger('click');
this.trigger("click");
});
}
},
......@@ -150,7 +169,7 @@ VantComponent({
setCurrentIndexByName(name) {
const { children = [] } = this;
const matched = children.filter(
(child) => child.getComputedName() === name
child => child.getComputedName() === name
);
if (matched.length) {
this.setCurrentIndex(matched[0].index);
......@@ -181,9 +200,9 @@ VantComponent({
nextTick(() => {
this.resize();
this.scrollIntoView();
this.trigger('input');
this.trigger("input");
if (shouldEmitChange) {
this.trigger('change');
this.trigger("change");
}
});
},
......@@ -194,26 +213,55 @@ VantComponent({
}
},
resize(skipTransition = false) {
if (this.data.type !== 'line') {
console.log("resize")
if (this.data.type !== "line") {
return;
}
const { currentIndex, ellipsis } = this.data;
Promise.all([
getAllRect(this, '.van-tab'),
getRect(this, '.van-tabs__line'),
getAllRect(this, ".van-tab"),
getRect(this, ".van-tabs__line")
]).then(([rects = [], lineRect]) => {
const rect = rects[currentIndex];
if (rect == null) {
return;
}
let lineOffsetLeft = rects
.slice(0, currentIndex)
.reduce((prev, curr) => prev + curr.width, 0);
lineOffsetLeft +=
(rect.width - lineRect.width) / 2 + (ellipsis ? 0 : 8);
let lineWidths = 0;
let lineOffsetLeft = 0;
if (this.data.lineLengthType == 1) {
if (this.data.linePosition == 2) {
lineOffsetLeft = rect.left;
} else {
lineOffsetLeft = rects
.slice(0, currentIndex)
.reduce((prev, curr) => prev + curr.width, 0);
lineOffsetLeft += 8;
}
lineWidths = rect.width;
} else if (this.data.lineLengthType == 2) {
// 宽度*80%
if (this.data.linePosition == 2) {
lineOffsetLeft = rect.left+rect.width*0.2;
} else {
lineOffsetLeft = rects
.slice(0, currentIndex)
.reduce((prev, curr) => prev + curr.width, 0);
lineOffsetLeft += rect.width * 0.2;
lineOffsetLeft += 8;
}
lineWidths = rect.width * 0.6;
} else {
// 有问题暂不支持固定宽度
// lineOffsetLeft = rects
// .slice(0, currentIndex)
// .reduce((prev, curr) => prev + curr.width, 0);
// lineOffsetLeft += this.data.lineWidth / 2;
// lineWidths = this.data.lineWidth;
}
this.setData({
lineWidth: lineWidths,
lineOffsetLeft,
skipTransition,
skipTransition
});
});
},
......@@ -224,20 +272,20 @@ VantComponent({
return;
}
Promise.all([
getAllRect(this, '.van-tab'),
getRect(this, '.van-tabs__nav'),
getAllRect(this, ".van-tab"),
getRect(this, ".van-tabs__nav")
]).then(([tabRects, navRect]) => {
const tabRect = tabRects[currentIndex];
const offsetLeft = tabRects
.slice(0, currentIndex)
.reduce((prev, curr) => prev + curr.width, 0);
this.setData({
scrollLeft: offsetLeft - (navRect.width - tabRect.width) / 2,
scrollLeft: offsetLeft - (navRect.width - tabRect.width) / 2
});
});
},
onTouchScroll(event) {
this.$emit('scroll', event.detail);
this.$emit("scroll", event.detail);
},
onTouchStart(event) {
if (!this.data.swipeable) return;
......@@ -252,7 +300,7 @@ VantComponent({
if (!this.data.swipeable) return;
const { direction, deltaX, offsetX } = this;
const minSwipeDistance = 50;
if (direction === 'horizontal' && offsetX >= minSwipeDistance) {
if (direction === "horizontal" && offsetX >= minSwipeDistance) {
const index = this.getAvaiableTab(deltaX);
if (index !== -1) {
this.setCurrentIndex(index);
......@@ -278,6 +326,6 @@ VantComponent({
}
}
return -1;
},
},
}
}
});
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment