首頁組件
This commit is contained in:
魏啾
153
components/blackmonth-swiper/index.vue
Normal file
153
components/blackmonth-swiper/index.vue
Normal file
@@ -0,0 +1,153 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="swiperPanel" @touchstart="startMove" @touchend="endMove">
|
||||
<view class="swiperItem" v-for="(item, index) in swiperList" :key="index"
|
||||
:style="{transform: itemStyle[index].transform, zIndex: itemStyle[index].zIndex, opacity: itemStyle[index].opacity}">
|
||||
<view class="children">
|
||||
<image class="pic" :src="item.logo"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <swiper class="swiperItem" circular v-for="(item, index) in swiperList" :key="index"
|
||||
:style="{transform: itemStyle[index].transform, zIndex: itemStyle[index].zIndex, opacity: itemStyle[index].opacity}">
|
||||
<swiper-item class="children">
|
||||
<image class="pic" :src="item.logo"></image>
|
||||
</swiper-item>
|
||||
</swiper> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
swiperList: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
timersetnteritem: {
|
||||
type: String,
|
||||
default: '0'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
timersetInterval: null,
|
||||
slideNote: {
|
||||
x: 0,
|
||||
y: 0
|
||||
},
|
||||
screenWidth: 0,
|
||||
itemStyle: []
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
timersetnteritem(newVal,oldVal) {
|
||||
if (newVal == 1) {
|
||||
clearTimeout(this.timersetInterval);
|
||||
this.timersetInterval = null;
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
var macInfo = uni.getSystemInfoSync();
|
||||
this.screenWidth = macInfo.screenWidth;
|
||||
// 计算swiper样式
|
||||
this.swiperList.forEach((item, index) => {
|
||||
this.itemStyle.push(this.getStyle(index))
|
||||
})
|
||||
this.timersetInterval = setInterval(() => {
|
||||
this.endMove()
|
||||
}, 2000);
|
||||
},
|
||||
methods: {
|
||||
getStyle(e) {
|
||||
if (e > this.swiperList.length / 2) {
|
||||
var right = this.swiperList.length - e
|
||||
return {
|
||||
transform: 'scale(' + (1) + ') translate(-' + (right * 20) + '%,0px)',
|
||||
zIndex: 9999 - right,
|
||||
opacity: 1
|
||||
}
|
||||
} else {
|
||||
return {
|
||||
transform: 'scale(' + (1) + ') translate(' + (e * 20) + '%,0px)',
|
||||
zIndex: 9999 - e,
|
||||
opacity: 1
|
||||
}
|
||||
}
|
||||
// if (e > this.swiperList.length / 2) {
|
||||
// var right = this.swiperList.length - e
|
||||
// return {
|
||||
// transform: 'scale(' + (1 - right / 10) + ') translate(-' + (right * 9) + '%,0px)',
|
||||
// zIndex: 9999 - right,
|
||||
// opacity: 0.8 / right
|
||||
// }
|
||||
// } else {
|
||||
// return {
|
||||
// transform: 'scale(' + (1 - e / 10) + ') translate(' + (e * 9) + '%,0px)',
|
||||
// zIndex: 9999 - e,
|
||||
// opacity: 0.8 / e
|
||||
// }
|
||||
// }
|
||||
},
|
||||
startMove(e) {
|
||||
this.slideNote.x = e.changedTouches[0] ? e.changedTouches[0].pageX : 0;
|
||||
this.slideNote.y = e.changedTouches[0] ? e.changedTouches[0].pageY : 0;
|
||||
},
|
||||
endMove(e) {
|
||||
console.log(e, 86)
|
||||
var newList = JSON.parse(JSON.stringify(this.itemStyle))
|
||||
// if ((e.changedTouches[0].pageX - this.slideNote.x) < 0) {
|
||||
// 向左滑动
|
||||
var last = [newList.pop()]
|
||||
newList = last.concat(newList)
|
||||
// } else {
|
||||
// 向右滑动
|
||||
// newList.push(newList[0])
|
||||
// newList.splice(0, 1)
|
||||
// }
|
||||
this.itemStyle = newList
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.swiperPanel {
|
||||
margin: 20rpx 0;
|
||||
height: 100rpx;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
.swiperItem {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: all .5s;
|
||||
|
||||
/* 定义一个动画关键帧 */
|
||||
|
||||
|
||||
.children {
|
||||
height: 100%;
|
||||
width: 25%;
|
||||
// margin: 2rpx auto;
|
||||
|
||||
|
||||
/* 应用动画，设置动画时长、循环次数和速度曲线 */
|
||||
.pic {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border-radius: 50%;
|
||||
// box-shadow: 0 0 10px #333;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
145
components/navseat.vue
Normal file
145
components/navseat.vue
Normal file
@@ -0,0 +1,145 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<!-- 导航栏 -->
|
||||
<view class="navbar" :class="{active:opacity}">
|
||||
<!-- #ifndef APP-PLUS || MP-WEIXIN -->
|
||||
<view class="status-bar"></view>
|
||||
<view class="navbar_tow flex-between"
|
||||
:style="{'height':HeighT.customBar+'px','padding-right':HeighT.custwidth + 'px'}">
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
<view class="navbar_tow flex-between" :style="{'marginTop':HeighT.heightBar /2+'px'}">
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view class="navbar_tow flex-between"
|
||||
:style="{'height':HeighT.customBar+'px','marginTop':HeighT.heightBar+'px','padding-right':HeighT.custwidth + 'px'}">
|
||||
<!-- #endif -->
|
||||
<!-- 标题搜索框 -->
|
||||
<view class="flex-between" @click="clicknavigateBack">
|
||||
<view class="navbar_tow_one flex-start">
|
||||
<u-icon name="arrow-left" color="#000" size="40"></u-icon>
|
||||
</view>
|
||||
<view class="navbar_tow_tow" v-if="opacity">
|
||||
{{title}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
opacity: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
HeighT() { //手机类型的尺寸
|
||||
return this.$store.getters.is_BarHeight
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
clicknavigateBack(){
|
||||
uni.navigateBack()
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
page {
|
||||
background: #F9F9F9;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 999999;
|
||||
|
||||
.active {
|
||||
background: rgba(249, 249, 249, 1);
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
// #ifdef APP-PLUS
|
||||
height: calc(var(--status-bar-height) / 2);
|
||||
// #endif
|
||||
// #ifdef MP-WEIXIN
|
||||
height: var(--status-bar-height);
|
||||
// #endif
|
||||
}
|
||||
|
||||
// #ifdef APP-PLUS
|
||||
.statusbarmargin {
|
||||
margin-top: var(--status-bar-height);
|
||||
}
|
||||
|
||||
// #endif
|
||||
.navbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 99;
|
||||
|
||||
.navbar_tow {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
font-size: 36rpx;
|
||||
|
||||
.flex-between {
|
||||
// #ifdef APP-PLUS || H5
|
||||
margin: 28rpx;
|
||||
// #endif
|
||||
// #ifdef MP-WEIXIN
|
||||
margin-left: 28rpx;
|
||||
// #endif
|
||||
width: 100%;
|
||||
flex-wrap: nowrap;
|
||||
height: 100%;
|
||||
line-height: 100%;
|
||||
|
||||
.navbar_tow_one {
|
||||
height: 100%;
|
||||
line-height: 100%;
|
||||
|
||||
text:nth-child(1) {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: bold;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
text:nth-child(2) {
|
||||
margin-left: 16rpx;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar_tow_tow {
|
||||
flex: auto;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
209
components/qiyue-category/qiyue-category.vue
Normal file
209
components/qiyue-category/qiyue-category.vue
Normal file
@@ -0,0 +1,209 @@
|
||||
<template>
|
||||
<view class="nav">
|
||||
<view class="nav-left">
|
||||
<scroll-view scroll-y>
|
||||
<view class="nav-left-item" v-for="(item, index) in categoryList"
|
||||
@click="categoryClickMain(item, index)" :key="index"
|
||||
:style="index == categoryActive ? 'color:' + activeTextColor + ';background-color:' + activeBackgroundColor : ''">
|
||||
{{ item[label] }}
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="nav-right" v-if="!subCategoryList.length == 0">
|
||||
<scroll-view scroll-y :scroll-top="scrollTop" @scroll="scroll" @scrolltolower="loadMore"
|
||||
scroll-with-animation>
|
||||
<view class="nav-right-item" v-for="(item, index2) in subCategoryList" :key="index2"
|
||||
@click="categoryClickSub(item)">
|
||||
<view>{{ item[label] }}</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'category',
|
||||
data() {
|
||||
return {
|
||||
h: null,
|
||||
namelang: '',
|
||||
keyword: '请输入相关行业',
|
||||
height: 0,
|
||||
scrollTop: 0,
|
||||
scrollHeight: 0,
|
||||
categoryActive: 0,
|
||||
activeStyle: {
|
||||
color: this.activeTextColor,
|
||||
backgroundColor: this.activeBackgroundColor
|
||||
}
|
||||
};
|
||||
},
|
||||
props: {
|
||||
//主分类激活索引
|
||||
merchant: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
defaultActive: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
//主分类List
|
||||
categoryList: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
//侧边分类List
|
||||
subCategoryList: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
activeTextColor: {
|
||||
type: String,
|
||||
default: '#FF981E'
|
||||
},
|
||||
activeBackgroundColor: {
|
||||
type: String,
|
||||
default: '#fff'
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
default: 'name'
|
||||
},
|
||||
imgSrc: {
|
||||
type: String,
|
||||
default: 'logo'
|
||||
},
|
||||
//主分类点击事件
|
||||
categoryMainClick: {},
|
||||
//子分类点击事件
|
||||
categorySubClick: {}
|
||||
},
|
||||
methods: {
|
||||
async computed_h() {
|
||||
//获取div宽度
|
||||
let content_Icon = await uni.utils.info_distance('Box_top');
|
||||
let content_top_box = await uni.utils.info_distance('Box_text');
|
||||
let system_info = await uni.getSystemInfo();
|
||||
var h_ = system_info.windowHeight + 'px';
|
||||
this.h = {
|
||||
height: h_
|
||||
};
|
||||
},
|
||||
scroll(e) {
|
||||
this.scrollHeight = e.detail.scrollHeight;
|
||||
},
|
||||
categoryClickMain(category, index) {
|
||||
this.namelang = category.name
|
||||
this.$emit('categoryMainClick', {
|
||||
'category': category,
|
||||
'index': index
|
||||
});
|
||||
this.categoryActive = index;
|
||||
this.scrollTop = -this.scrollHeight * index;
|
||||
},
|
||||
loadMore(e) {
|
||||
console.log(e)
|
||||
this.$emit('loadMores');
|
||||
},
|
||||
categoryClickSub(category) {
|
||||
this.$emit('categorySubClick', category);
|
||||
},
|
||||
searchkeyword() {
|
||||
this.$emit('searchkeyword', this.keyword)
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.categoryActive = this.defaultActive;
|
||||
this.computed_h();
|
||||
// uni.getSystemInfo({
|
||||
// success: res => {
|
||||
// console.log(res);
|
||||
// this.height = res.windowHeight;
|
||||
// }
|
||||
// });
|
||||
},
|
||||
watch: {
|
||||
subCategoryList(newValue, oldValue) {}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.Box_top {
|
||||
padding: 32rpx 28rpx;
|
||||
}
|
||||
|
||||
.Box_text {
|
||||
background: #f1f0f5;
|
||||
padding: 10rpx 28rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.Box_texttext {
|
||||
margin-left: 16rpx;
|
||||
font-size: 28rpx;
|
||||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.nav-left {
|
||||
max-height: 600rpx;
|
||||
width: 30%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.nav-left-item {
|
||||
padding: 10rpx 0;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.nav-right {
|
||||
width: 70%;
|
||||
max-height: 600rpx;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.nav-right-item {
|
||||
width: 100%;
|
||||
border-left: solid 1px #e0e0e0;
|
||||
/* height: 100px; */
|
||||
text-align: left;
|
||||
padding: 24rpx 32rpx;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.nav-right-item image {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.active {
|
||||
color: #f24544;
|
||||
}
|
||||
|
||||
.padding {
|
||||
height: var(--status-bar-height);
|
||||
width: 100%;
|
||||
top: 0;
|
||||
position: fixed;
|
||||
background-color: #f24544;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user