cnbugs/uni-halo
1
0
Fork 0
mirror of https://github.com/ialley-workshop-open/uni-halo.git synced 2026-06-12 21:29:31 +08:00
Code Issues Activity

v1.0.0-beta 源码正式开源

Browse Source
This commit is contained in:
小莫唐尼
2022-12-06 15:08:29 +08:00
commit 636ae7b169
461 changed files with 116817 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/e-swiper/e-swiper.vue
+233
View File
@@ -0,0 +1,233 @@
<template>
<!-- 轮播图 -->
<view class="Swiper-mfw-index-box">
<view class="Swiper-mfw-index Swiper-box" :class="[dotPosition]">
<swiper
class="Swiper-mfw"
:style="{ height: height }"
:circular="true"
:indicator-dots="false"
:autoplay="autoplay"
:interval="3000"
:duration="1000"
:current="currentIndex"
:disable-touch="disable_touch"
@change="change"
>
<!-- 只需要前5条数据 -->
<swiper-item class="swiper-mfw-item" v-if="index <= (dotPosition == 'right' ? 3 : 4)" v-for="(item, index) in list" :key="index">
<!-- /*
1. 这里不需要用api控制暂停视频
2. 因为video标签上加了v-if="current==index"
3. 当current == index时才会创建视频组件
4. 否current != index则就销毁视频
*/ -->
<!-- 如果有视频，则显示视频-->
<template v-if="item.mp4 && current == index">
<video
class="ImageVideo"
:id="'ImageVideo' + index"
:ref="'ImageVideo' + index"
:src="item.mp4"
:loop="true"
:muted="false"
:autoplay="current == index ? true : false"
:controls="false"
:show-fullscreen-btn="false"
:show-play-btn="false"
:enable-progress-gesture="false"
:play-strategy="0"
:poster="item.image || item.src"
></video>
</template>
<!-- 否则显示图片 -->
<image v-else :src="item.image || item.src" class="Image" mode="aspectFill" @click.stop="$emit('on-click', item)"></image>
</swiper-item>
</swiper>
<!-- 指示器 [Top] -->
<view v-if="useTop" class="Swiper-indicator-box indicator-Top-box">
<!-- Top顶部 [今日首推-盒子] -->
<view class="Top-date-hot">
<view class="left-date-ri">
<text class="date-ri-text text">{{ date.month }}</text>
</view>
<view class="conter-date-nianyue">
<view class="left-width-bgcolor"></view>
<view class="right-date-nianyue">
<text class="Top-yue-usa text">{{ date.monthEn }}</text>
<text class="Bottom-nian text">{{ date.year }}</text>
</view>
</view>
<view class="right-hot-ttf">
<text class="text hot-text">{{ title }}</text>
</view>
</view>
</view>
<!-- 指示器 标题区域 -->
<view v-if="useTitle" class="Swiper-indicator-Top" :class="{ 'no-dot': !useDot }">
<block v-for="(item, index) in list" :key="index">
<view v-if="currentIndex == index" class="Top-item" :class="current == index ? 'current' : 'no'">
<!-- 如果存在视频，则显示“视频预览”提示 -->
<view v-if="item.mp4" class="Top-ImageVideo">
<!-- icon图标 -->
<view class="Icons">
<!-- 播放按钮图标 -->
<text class="iconfont icon-caret-right"></text>
</view>
<text class="text ImageVideo-text app-ttf">视频预览</text>
</view>
<!-- 标题 -->
<view class="Top-Title">
<text class="text title-text">{{ item.title }}</text>
</view>
<!-- 用户信息 -->
<view class="Bottom-UserInfo">
<!-- 头像 -->
<view class="UserImage-box"><image :src="item.avatar" class="Image" mode="aspectFill"></image></view>
<!-- 用户名 -->
<view class="textbox UserName-box">
<text class="text UserInfo">{{ item.nickname }}</text>
</view>
<view v-if="item.createTime" class="jiange-box"><text class="text jiange-text"></text></view>
<view v-if="item.createTime" class="textbox UserGPS-box">
<text class="text UserInfo">发布于 {{ item.createTime }}</text>
</view>
<view v-if="item.address" class="jiange-box"><text class="text jiange-text">·</text></view>
<view v-if="item.address" class="textbox UserGPS-box">
<text class="text UserInfo">{{ item.address }}</text>
</view>
</view>
</view>
</block>
</view>
<!-- 指示器 [左边图片列表+右边按钮] -->
<view v-if="useDot" class="Swiper-indicator-Bottom">
<!-- 左边 -->
<view class="Bottom-left-Imagelist">
<block v-for="(item, index) in list" :key="index">
<view
class="Bottom-item"
v-if="Number(index) <= (dotPosition == 'right' ? 3 : 4)"
:class="currentIndex == index ? 'current' : 'no'"
@click="SwiperIndTap(index)"
>
<image :src="item.image || item.src" class="Image" mode="aspectFill"></image>
</view>
</block>
</view>
<!-- 右边 -->
<view class="Bottom-right-lili-btn">
<view class="Bottom-item is-more">
<view class="more" @click.stop="$emit('on-more')">
MORE
<text class="iconfont icon-caret-right"></text>
</view>
<text class="left text indicator-text">更多推荐</text>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
name: 'e-swiper',
props: {
title: {
type: String,
default: ''
},
height: {
type: String,
default: '450rpx'
},
dotPosition: {
type: String,
default: 'bottom'
},
useTop: {
type: Boolean,
default: true
},
useDot: {
type: Boolean,
default: true
},
useTitle: {
type: Boolean,
default: true
},
useUser: {
type: Boolean,
default: true
},
// 轮播图 数据列表
list: {
type: Array,
default: () => []
},
// 当前选中的项(指示器坐标位置)
current: {
type: Number,
default: 0
},
// 是否自动轮播
autoplay: {
type: Boolean,
default: false
}
},
data() {
return {
// 是否禁止用户 touch 操作
currentIndex: 0,
disable_touch: false, //touch 用户划动引起swiper变化。
date: {
year: '-',
monthEn: '-',
month: '-'
}
};
},
created() {
this.currentIndex = this.current;
const date = new Date();
//将月份名称存储在数组中
const monthArray = new Array('Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec');
this.date.year = date.getFullYear();
let month = date.getMonth() + 1;
this.date.month = month < 10 ? '0' + month : month;
this.date.monthEn = monthArray[date.getMonth()].toUpperCase();
},
methods: {
// current 改变时会触发 change 事件，event.detail = {current: current, source: source}
change(e) {
let { current, source } = e.detail;
//只有页面自动切换，手动切换时才轮播，其他不允许
if (source === 'autoplay' || source === 'touch') {
let event = {
current: current
};
this.currentIndex = current;
this.$emit('change', event);
}
},
// 手动点击了指示器[小图模式]
SwiperIndTap(e) {
let index = e;
let event = {
current: index
};
this.currentIndex = index;
this.$emit('change', event);
}
}
};
</script>
<style lang="scss" scoped>
@import './e-swiper.scss';
</style>