793 lines
23 KiB
Vue
793 lines
23 KiB
Vue
<!-- 电影画廊组件 -->
|
||
|
||
<template>
|
||
<view class="ynGalleryPanel">
|
||
<view class="gallerypanel" style="filter:brightness(1);border-radius:1upx"
|
||
:style="{'background':bkstyle,'height':galleryheight+'px','width':'100%'}">
|
||
<scroll-view class="scroll-view" scroll-x="true" scroll-with-animation="true" :scroll-into-view="toview"
|
||
:scroll-left="scrollLeft" @scroll="scroll">
|
||
<!-- scroll-view-panle 容纳左右空块+中间img块 -->
|
||
<view class="scroll-view-panle" @touchend='touchEndHandle' @touchstart='touchStartHandle'
|
||
@touchmove='touchMoveHandle'>
|
||
<!-- 左侧留空 必须用min-width属性 用width属性无效-->
|
||
<view class="leftview" :style="{'min-width':sviewlst.leftview.w+'px','height':galleryheight+'px'}">
|
||
</view>
|
||
<!-- 中间图像横向列表 ==-->
|
||
<!-- 外层 高度与画廊高度一样 -->
|
||
<view :id="'imgviewpanel'+index" :ref="'imgviewpanel'+index"
|
||
:class="[activeviewindex == index? 'trans-fadeout': '']" @animationstart="animationstartHandle"
|
||
@animationend="animationendHandle" v-for="(item,index) in sviewlst.imgsview" :key="index"
|
||
:style="{'width':item.w+'px','height':galleryheight+'px'}"
|
||
style="border: #BB6622 0px solid;display:flex;flex-direction: column;align-content:center;justify-content: flex-end;">
|
||
<!-- 内层 高度是图片容器的高度 -->
|
||
<!-- 顶部圆角角标 -->
|
||
<view v-if="showbadge && badegtype=='round'" class="roundbadge"
|
||
:style="{background:[(index % 2) ==0? 'red':'green']}">
|
||
<text> {{item.badeg}}</text>
|
||
</view>
|
||
<!-- 三角标记组件 -->
|
||
<!-- <ynTriangleBadge v-if="showbadge && badegtype=='trian'" :width="badegwidth"
|
||
:height="badegheight" :text="item.badeg" :bgcolor="item.badegcolor"
|
||
style="z-index:2;align-self: flex-end;margin-right: 5px;border: #EC6D2C 0upx solid;"
|
||
:style="{'margin-bottom':(parseInt(badegheight)+5)*-1+'px'}">
|
||
</ynTriangleBadge> -->
|
||
<!-- 图片框 居中属性-->
|
||
<view style="display:flex; align-content:flex-end;justify-content: center; border:red 0px solid;"
|
||
:style="{'width':item.w+'px','height': item.h+'px'}">
|
||
<image :ref="'image'+index"
|
||
style="align-self: center;border-radius: 1px; "
|
||
:style="{'width' :item.w-10 +'px',
|
||
'height':item.h-10 +'px',
|
||
'border':[activeviewindex == index? '#EC6D2C 1px solid':'#EC6D2C 0px solid']}"
|
||
:src="item.posterUrl"
|
||
@click="clickimg(index,item)" mode="scaleToFill">
|
||
</image>
|
||
</view>
|
||
<!-- 描述视图 -->
|
||
<view
|
||
style="display: flex;justify-content: center;margin-bottom: 4px;border: #008000 0px solid;min-height: 10px;">
|
||
<!-- <text v-if="showdec" style="align-self: center;font-size: 12px;color:white">{{item.dec}}</text> -->
|
||
</view>
|
||
</view>
|
||
<!-- 右侧留空 必须用min-width属性 用width属性无效-->
|
||
<view class="rightview"
|
||
:style="{'min-width':sviewlst.rightview.w+'px','height':galleryheight+'px'}"></view>
|
||
</view>
|
||
</scroll-view>
|
||
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import ynTriangleBadge from './film-badge.vue';
|
||
export default {
|
||
components: {
|
||
ynTriangleBadge,
|
||
},
|
||
name: 'FilmSwiper',
|
||
props: {
|
||
//背景起始色
|
||
bkstart: {
|
||
type: [String],
|
||
default: '#000000'
|
||
},
|
||
// 背景结束色
|
||
bkend: {
|
||
type: [String],
|
||
default: '#000000'
|
||
},
|
||
// 画廊高度 单位px
|
||
galleryheight: {
|
||
type: [Number, String],
|
||
default: 180 * 1.0
|
||
},
|
||
//图像源对象列表
|
||
images: {
|
||
type: Array,
|
||
},
|
||
//图像容器宽度
|
||
imgviewwidth: {
|
||
type: [Number],
|
||
default: parseInt(170 * 0.5)
|
||
},
|
||
//图像容器高度
|
||
imgviewheight: {
|
||
type: [Number],
|
||
default: parseInt(235 * 0.45)
|
||
},
|
||
showbadge: {
|
||
type: [Boolean],
|
||
default: false
|
||
},
|
||
showdec: {
|
||
type: [Boolean],
|
||
default: false
|
||
},
|
||
badegtype: {
|
||
type: [String],
|
||
default: 'trian' //round trian
|
||
},
|
||
badegwidth: {
|
||
type: [String],
|
||
default: "25"
|
||
},
|
||
badegheight: {
|
||
type: [String],
|
||
default: "25"
|
||
}
|
||
|
||
},
|
||
|
||
data() {
|
||
return {
|
||
//bkstart bkend不能在组件内赋值 该元素做中转
|
||
bkstartcolor: this.bkstart,
|
||
bkendcolor: this.bkend,
|
||
|
||
badegcolor: "red",
|
||
// 定时器 用来判断滑动是否结束
|
||
TTT: null,
|
||
// 这个变量用来判断是否进行了滑动操作
|
||
istouchmove: false,
|
||
// 手指是否离开了屏幕
|
||
isEndTouch: true,
|
||
// 屏幕中心点
|
||
screencenterpos: 0,
|
||
//当前焦点view块index序
|
||
activeviewindex: 0,
|
||
//焦点图中间点与屏幕中间点的偏移，通常不滑动的时候，焦点图总是显示在中间，且图的中间点总是与屏幕中间重合
|
||
offset: 0,
|
||
//这个用来定位具体的位置
|
||
scrollLeft: 0,
|
||
//当前距离左边的距离
|
||
newleft: 0,
|
||
//上一次距离左边的距离
|
||
oldleft: {
|
||
scrollleft: 0
|
||
},
|
||
//滚动组件内视图块数据定义
|
||
sviewlst: {
|
||
leftview: {}, //左则空块
|
||
rightview: {}, //右侧空块
|
||
imgsview: [] //中间image图像数组块
|
||
},
|
||
toview: "viewitem0",
|
||
};
|
||
},
|
||
created: function() {
|
||
if (this.images.length > 0) {
|
||
this.screencenterpos = parseInt(uni.upx2px(750) / 2);
|
||
this.upDataScrollviewLayout(this.activeviewindex);
|
||
}
|
||
},
|
||
mounted: function() {},
|
||
watch: {
|
||
async images() {
|
||
var that = this;
|
||
console.log('watch监控到images属性变化');
|
||
this.screencenterpos = parseInt(uni.upx2px(750) / 2);
|
||
console.log("屏幕中点pos位置:" + this.screencenterpos + 'px');
|
||
this.upDataScrollviewLayout(this.activeviewindex);
|
||
},
|
||
activeviewindex() {
|
||
this.$emit('scrollerItem', this.images[this.activeviewindex])
|
||
}
|
||
},
|
||
computed: {
|
||
// 返回径向渐变样式值 用来设置背景 如果定义了每个image的主色（domiant）则会设置该主色作为径向渐变的起始色
|
||
bkstyle() {
|
||
// return `radial-gradient(circle,${this.bkstartcolor}, ${this.bkendcolor})`
|
||
},
|
||
},
|
||
methods: {
|
||
SetBkRightAnimate: function(startcolor) {
|
||
var that = this;
|
||
var nums = 10;
|
||
//取2个颜色之间的过渡色
|
||
var colorarr = this.gradientColor(startcolor, this.bkendcolor, nums);
|
||
// console.log(colorarr)
|
||
let num = 10;
|
||
//渐显
|
||
var i = setInterval(function() {
|
||
that.bkstartcolor = colorarr[num - 1]
|
||
num--;
|
||
//0=最亮 所以这里也可以控制明暗
|
||
if (num < (10 / 2))
|
||
clearInterval(i);
|
||
}, 50);
|
||
},
|
||
endscroll: function(e) {
|
||
// console.log('endscorll')
|
||
},
|
||
//实时监控scrol位置 计算焦点图中点偏移
|
||
scroll: function(e) {
|
||
// console.log('检测到scroll 被触发......')
|
||
var that = this;
|
||
// console.log(e)
|
||
this.newleft = e.mp.detail.scrollLeft;
|
||
this.oldleft.scrollleft = this.newleft;
|
||
//scroll左边点+屏幕中点 总是随着拖动而变化
|
||
let cenpos = e.mp.detail.scrollLeft + this.screencenterpos;
|
||
// console.log('中锚点位置:'+cenpos);
|
||
for (let i in this.sviewlst.imgsview) {
|
||
let item = this.sviewlst.imgsview[i];
|
||
if ((item.l <= cenpos) && (item.r >= cenpos)) {
|
||
let imgcpos = item.l + parseInt(item.w / 2);
|
||
let aoffset = cenpos - imgcpos;
|
||
this.offset = aoffset;
|
||
this.upDataScrollviewLayout(i);
|
||
break;
|
||
}
|
||
}
|
||
},
|
||
|
||
//$emit 向上传递 所有父或者父父组件会依次接收到emit事件
|
||
clickimg(idx, imgviewobj) {
|
||
this.activeviewindex = idx
|
||
this.scrollLeft = this.sviewlst.imgsview[idx].l - parseInt(this.screencenterpos) + parseInt(this.sviewlst
|
||
.imgsview[idx].w / 2);
|
||
this.$emit('clickimg', imgviewobj)
|
||
},
|
||
|
||
touchStartHandle(e) {
|
||
// 手指按到屏幕
|
||
this.istouchmove = false;
|
||
this.isEndTouch = false;
|
||
},
|
||
touchMoveHandle(e) {
|
||
// 手指滑动中
|
||
this.istouchmove = true;
|
||
},
|
||
touchEndHandle(e) {
|
||
// 手指离开屏幕
|
||
this.isEndTouch = true;
|
||
},
|
||
animationstartHandle() {
|
||
// 元素css动画开始事件
|
||
// console.log('animate is start')
|
||
},
|
||
animationendHandle() {
|
||
//渲染背景颜色(right动画)
|
||
let color = this.sviewlst.imgsview[this.activeviewindex].dominant;
|
||
//触发背景动画
|
||
this.SetBkRightAnimate(color);
|
||
},
|
||
|
||
//更新Scrollview内view块布局
|
||
//offset: 为实现滑动动画效果,需要临近的2张图片做呼吸效果(焦点图逐渐放大缩小,相领的图逐渐缩小放大)，需要这个参数，
|
||
// offset参数在 滑动scrollview的实时回调函数中计算 offset暂时设置为全局变量
|
||
// offset相对于中点偏移,中点左边为负 右边为正 类似于线段图（） 本函数会根据offset和最大放大系数来计算放大系数
|
||
// 焦点图中间点与屏幕中间点的偏移，通常不滑动的时候，焦点图总是显示在中间，且图的中间点总是与屏幕中间重合
|
||
// 当为负的时候,与左边的index 进行互斥放大和缩小,
|
||
// 当为0的时候,当前焦点图放到了最大
|
||
// 当为正的时候,与右边的index 进行互斥放大和缩小
|
||
upDataScrollviewLayout(activeindex) {
|
||
console.log('检测到 initScrollviewLayout');
|
||
var that = this;
|
||
|
||
this.upbkcolor = false;
|
||
|
||
var that = this;
|
||
if (this.images.length <= 0) {
|
||
return
|
||
};
|
||
var offset = this.offset;
|
||
|
||
//一、构造滚动组件内view块分布
|
||
//1、左view块 留空用 为了让第一张图片可以居中
|
||
var lview = {}
|
||
lview.dec = "left view"
|
||
lview.w = this.screencenterpos;
|
||
lview.h = this.imgviewheight;
|
||
lview.l = 0;
|
||
lview.r = lview.l + lview.w;
|
||
|
||
//2、处理中间imagelist块
|
||
//2.1、设计默认大小的imageview块布局
|
||
var arrimgview = [];
|
||
var i = 0;
|
||
while (i <= this.images.length - 1) {
|
||
|
||
let obj = {
|
||
index: i,
|
||
url: '', //源
|
||
dec: '', //图像描述信息
|
||
badeg: '', //角标文字
|
||
badegcolor: this.badegcolor, //角标默认颜色
|
||
dominant: this.bkstartcolor, //默认主色
|
||
w: 0, //该view宽度
|
||
h: 0, //该view高度
|
||
l: 0, //该view块左边距scroll容器左边距离
|
||
r: 0, //该view右边距scroll容器左边距离
|
||
}
|
||
|
||
//合并外界传来image对象属性 若有重合的属性 后面的覆盖前面
|
||
let imgview = Object.assign(obj, this.images[i]);
|
||
|
||
//添加长宽等数据
|
||
imgview.w = this.imgviewwidth;
|
||
imgview.h = this.imgviewheight;
|
||
|
||
if (i == 0) {
|
||
imgview.l = lview.r + 0;
|
||
} else {
|
||
imgview.l = arrimgview[i - 1].r + 0;
|
||
}
|
||
imgview.r = imgview.l + imgview.w;
|
||
|
||
arrimgview.push(imgview);
|
||
i++;
|
||
};
|
||
|
||
//3、右边view块 留空用 为了让最后一张图片可以居中
|
||
let rview = {}
|
||
rview.dec = "right view"
|
||
//使得最后一张图片中间部分对齐屏幕正中间
|
||
rview.w = this.screencenterpos;
|
||
rview.h = this.imgviewheight;
|
||
if (arrimgview.length <= 0) {
|
||
rview.l = lview.r + 0;
|
||
} else {
|
||
rview.l = arrimgview[arrimgview.length - 1].r + 0;
|
||
}
|
||
rview.r = rview.l + rview.w;
|
||
|
||
//二、计算焦点图 焦点图左右临图的放大系数关系 修改相应块的高宽
|
||
var leftaf = 1;
|
||
var rightaf = 1;
|
||
var activeaf = 1;
|
||
var af = 0.18;
|
||
//左右临图与焦点图的系数计算（焦点图总是与左临图 或者 右临图发生进退大小关系（2张图的关系 构成视觉动画））
|
||
if (arrimgview.length > 0) {
|
||
let aindex = activeindex;
|
||
let lindex = parseInt(aindex) - 1;
|
||
let rindex = parseInt(aindex) + 1;
|
||
|
||
//取焦点imgview块(默认放大1.18倍)）宽度的一半
|
||
let lw = (this.imgviewwidth * 1.18) / 2
|
||
//根据偏移取计算百分比
|
||
let bl = Math.abs(offset) / lw
|
||
// 计算焦点放大系数 默认最大1.18
|
||
if (offset == 0) {
|
||
activeaf = 1.18;
|
||
leftaf = 1;
|
||
rightaf = 1;
|
||
}
|
||
|
||
if (offset > 0) {
|
||
activeaf = 1 + 0.18 * (1 - bl / 2)
|
||
rightaf = 1 + (1.18 - activeaf)
|
||
leftaf = 1;
|
||
}
|
||
|
||
if (offset < 0) {
|
||
activeaf = 1 + 0.18 * (1 - bl / 2)
|
||
leftaf = 1 + (1.18 - activeaf)
|
||
rightaf = 1;
|
||
}
|
||
//设置焦点图放大系数
|
||
if (aindex >= 0 && aindex <= arrimgview.length - 1) {
|
||
arrimgview[aindex].w = this.imgviewwidth * activeaf;
|
||
arrimgview[aindex].h = this.imgviewheight * activeaf;
|
||
} else {
|
||
console.log("焦点图越界");
|
||
return;
|
||
};
|
||
|
||
//设置左临图 当offset小于0时,当前焦点图与左则相领图做拉扯动画
|
||
if (offset < 0) {
|
||
if (lindex >= 0) {
|
||
arrimgview[lindex].w = this.imgviewwidth * leftaf;
|
||
arrimgview[lindex].h = this.imgviewheight * leftaf;
|
||
}
|
||
}
|
||
|
||
//设置右临图 当offset大于0时,当前焦点图与右则相领图做拉扯动画
|
||
if (offset > 0) {
|
||
if (rindex <= arrimgview.length - 1) {
|
||
|
||
arrimgview[rindex].w = this.imgviewwidth * rightaf;
|
||
arrimgview[rindex].h = this.imgviewheight * rightaf;
|
||
}
|
||
}
|
||
}
|
||
|
||
//三、 修正左右边距，lveiw rview视图大小等
|
||
if (arrimgview.length > 0) {
|
||
lview.w = lview.w - (arrimgview[0].w / 2);
|
||
lview.r = lview.l + lview.w;
|
||
for (let i = 0; i <= arrimgview.length - 1; i++) {
|
||
if (i == 0) {
|
||
arrimgview[i].l = lview.r + 0;
|
||
} else {
|
||
arrimgview[i].l = arrimgview[i - 1].r + 0;
|
||
}
|
||
arrimgview[i].r = arrimgview[i].l + arrimgview[i].w;
|
||
};
|
||
rview.w = rview.w - (arrimgview[arrimgview.length - 1].w / 2) + 0;
|
||
rview.l = arrimgview[arrimgview.length - 1].r + 0;
|
||
rview.r = rview.l + rview.w;
|
||
}
|
||
//四、更新data数据 因为在template中进行了绑定 根据vue双向数据特性 会更新界面
|
||
var obj = {
|
||
'leftview': lview,
|
||
'rightview': rview,
|
||
'imgsview': arrimgview
|
||
};
|
||
|
||
this.activeviewindex = activeindex;
|
||
this.sviewlst = obj;
|
||
|
||
|
||
this.$nextTick(function() {
|
||
var that = this
|
||
if (this.istouchmove == true) {
|
||
clearTimeout(that.TTT);
|
||
var ai = that.activeviewindex;
|
||
var TTT = setTimeout(function() {
|
||
if (that.activeviewindex == ai) {
|
||
that.$emit('clickimg', that.sviewlst.imgsview[that.activeviewindex]);
|
||
}
|
||
}, 300)
|
||
}
|
||
|
||
})
|
||
},
|
||
|
||
/* 取2个颜色之间的过渡色 参考自网络
|
||
// startColor：开始颜色hex
|
||
// endColor ：结束颜色hex
|
||
// count : 产生几个 也就是步长
|
||
// sample: colorarr = gradientColor(startcolor,endcolor,5); 生成5个过渡颜色
|
||
*/
|
||
gradientColor(startColor, endColor, count) {
|
||
let startRGB = this.colorToRgb(startColor); //转换为rgb数组模式
|
||
let startR = startRGB[0];
|
||
let startG = startRGB[1];
|
||
let startB = startRGB[2];
|
||
|
||
let endRGB = this.colorToRgb(endColor);
|
||
let endR = endRGB[0];
|
||
let endG = endRGB[1];
|
||
let endB = endRGB[2];
|
||
|
||
let sR = (endR - startR) / count; //总差值
|
||
let sG = (endG - startG) / count;
|
||
let sB = (endB - startB) / count;
|
||
|
||
var colorArr = [];
|
||
for (var i = 0; i < count; i++) {
|
||
//计算每一步的hex值
|
||
var hex = this.colorToHex('rgb(' + parseInt((sR * i + startR)) + ',' + parseInt((sG * i + startG)) +
|
||
',' +
|
||
parseInt((sB * i + startB)) + ')');
|
||
colorArr.push(hex);
|
||
}
|
||
return colorArr;
|
||
},
|
||
|
||
// 将hex表示方式转换为rgb表示方式(这里返回rgb数组模式)
|
||
colorToRgb(sColor) {
|
||
// <http://www.w3.org/TR/css3-color/#svg-color>
|
||
var names = {
|
||
aliceblue: "f0f8ff",
|
||
antiquewhite: "faebd7",
|
||
aqua: "0ff",
|
||
aquamarine: "7fffd4",
|
||
azure: "f0ffff",
|
||
beige: "f5f5dc",
|
||
bisque: "ffe4c4",
|
||
black: "000",
|
||
blanchedalmond: "ffebcd",
|
||
blue: "00f",
|
||
blueviolet: "8a2be2",
|
||
brown: "a52a2a",
|
||
burlywood: "deb887",
|
||
burntsienna: "ea7e5d",
|
||
cadetblue: "5f9ea0",
|
||
chartreuse: "7fff00",
|
||
chocolate: "d2691e",
|
||
coral: "ff7f50",
|
||
cornflowerblue: "6495ed",
|
||
cornsilk: "fff8dc",
|
||
crimson: "dc143c",
|
||
cyan: "0ff",
|
||
darkblue: "00008b",
|
||
darkcyan: "008b8b",
|
||
darkgoldenrod: "b8860b",
|
||
darkgray: "a9a9a9",
|
||
darkgreen: "006400",
|
||
darkgrey: "a9a9a9",
|
||
darkkhaki: "bdb76b",
|
||
darkmagenta: "8b008b",
|
||
darkolivegreen: "556b2f",
|
||
darkorange: "ff8c00",
|
||
darkorchid: "9932cc",
|
||
darkred: "8b0000",
|
||
darksalmon: "e9967a",
|
||
darkseagreen: "8fbc8f",
|
||
darkslateblue: "483d8b",
|
||
darkslategray: "2f4f4f",
|
||
darkslategrey: "2f4f4f",
|
||
darkturquoise: "00ced1",
|
||
darkviolet: "9400d3",
|
||
deeppink: "ff1493",
|
||
deepskyblue: "00bfff",
|
||
dimgray: "696969",
|
||
dimgrey: "696969",
|
||
dodgerblue: "1e90ff",
|
||
firebrick: "b22222",
|
||
floralwhite: "fffaf0",
|
||
forestgreen: "228b22",
|
||
fuchsia: "f0f",
|
||
gainsboro: "dcdcdc",
|
||
ghostwhite: "f8f8ff",
|
||
gold: "ffd700",
|
||
goldenrod: "daa520",
|
||
gray: "808080",
|
||
green: "008000",
|
||
greenyellow: "adff2f",
|
||
grey: "808080",
|
||
honeydew: "f0fff0",
|
||
hotpink: "ff69b4",
|
||
indianred: "cd5c5c",
|
||
indigo: "4b0082",
|
||
ivory: "fffff0",
|
||
khaki: "f0e68c",
|
||
lavender: "e6e6fa",
|
||
lavenderblush: "fff0f5",
|
||
lawngreen: "7cfc00",
|
||
lemonchiffon: "fffacd",
|
||
lightblue: "add8e6",
|
||
lightcoral: "f08080",
|
||
lightcyan: "e0ffff",
|
||
lightgoldenrodyellow: "fafad2",
|
||
lightgray: "d3d3d3",
|
||
lightgreen: "90ee90",
|
||
lightgrey: "d3d3d3",
|
||
lightpink: "ffb6c1",
|
||
lightsalmon: "ffa07a",
|
||
lightseagreen: "20b2aa",
|
||
lightskyblue: "87cefa",
|
||
lightslategray: "789",
|
||
lightslategrey: "789",
|
||
lightsteelblue: "b0c4de",
|
||
lightyellow: "ffffe0",
|
||
lime: "0f0",
|
||
limegreen: "32cd32",
|
||
linen: "faf0e6",
|
||
magenta: "f0f",
|
||
maroon: "800000",
|
||
mediumaquamarine: "66cdaa",
|
||
mediumblue: "0000cd",
|
||
mediumorchid: "ba55d3",
|
||
mediumpurple: "9370db",
|
||
mediumseagreen: "3cb371",
|
||
mediumslateblue: "7b68ee",
|
||
mediumspringgreen: "00fa9a",
|
||
mediumturquoise: "48d1cc",
|
||
mediumvioletred: "c71585",
|
||
midnightblue: "191970",
|
||
mintcream: "f5fffa",
|
||
mistyrose: "ffe4e1",
|
||
moccasin: "ffe4b5",
|
||
navajowhite: "ffdead",
|
||
navy: "000080",
|
||
oldlace: "fdf5e6",
|
||
olive: "808000",
|
||
olivedrab: "6b8e23",
|
||
orange: "ffa500",
|
||
orangered: "ff4500",
|
||
orchid: "da70d6",
|
||
palegoldenrod: "eee8aa",
|
||
palegreen: "98fb98",
|
||
paleturquoise: "afeeee",
|
||
palevioletred: "db7093",
|
||
papayawhip: "ffefd5",
|
||
peachpuff: "ffdab9",
|
||
peru: "cd853f",
|
||
pink: "ffc0cb",
|
||
plum: "dda0dd",
|
||
powderblue: "b0e0e6",
|
||
purple: "800080",
|
||
rebeccapurple: "663399",
|
||
red: "f00",
|
||
rosybrown: "bc8f8f",
|
||
royalblue: "4169e1",
|
||
saddlebrown: "8b4513",
|
||
salmon: "fa8072",
|
||
sandybrown: "f4a460",
|
||
seagreen: "2e8b57",
|
||
seashell: "fff5ee",
|
||
sienna: "a0522d",
|
||
silver: "c0c0c0",
|
||
skyblue: "87ceeb",
|
||
slateblue: "6a5acd",
|
||
slategray: "708090",
|
||
slategrey: "708090",
|
||
snow: "fffafa",
|
||
springgreen: "00ff7f",
|
||
steelblue: "4682b4",
|
||
tan: "d2b48c",
|
||
teal: "008080",
|
||
thistle: "d8bfd8",
|
||
tomato: "ff6347",
|
||
turquoise: "40e0d0",
|
||
violet: "ee82ee",
|
||
wheat: "f5deb3",
|
||
white: "fff",
|
||
whitesmoke: "f5f5f5",
|
||
yellow: "ff0",
|
||
yellowgreen: "9acd32"
|
||
};
|
||
var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
|
||
var sColor = sColor.toLowerCase();
|
||
|
||
//颜色常量转换
|
||
if (sColor.slice(0, 1) != "#") {
|
||
for (var name in names) {
|
||
if (name == sColor) {
|
||
var sColor = "#" + names[name];
|
||
}
|
||
}
|
||
}; {
|
||
if (sColor && reg.test(sColor)) {
|
||
if (sColor.length === 4) {
|
||
var sColorNew = "#";
|
||
for (var i = 1; i < 4; i += 1) {
|
||
sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
|
||
}
|
||
sColor = sColorNew;
|
||
}
|
||
//处理6位的颜色值
|
||
var sColorChange = [];
|
||
for (var i = 1; i < 7; i += 2) {
|
||
sColorChange.push(parseInt("0x" + sColor.slice(i, i + 2)));
|
||
}
|
||
return sColorChange;
|
||
} else {
|
||
return sColor;
|
||
}
|
||
}
|
||
},
|
||
|
||
// 将rgb表示方式转换为hex表示方式
|
||
colorToHex(rgb) {
|
||
var _this = rgb;
|
||
var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
|
||
if (/^(rgb|RGB)/.test(_this)) {
|
||
var aColor = _this.replace(/(?:\(|\)|rgb|RGB)*/g, "").split(",");
|
||
var strHex = "#";
|
||
for (var i = 0; i < aColor.length; i++) {
|
||
var hex = Number(aColor[i]).toString(16);
|
||
hex = hex < 10 ? 0 + '' + hex : hex; // 保证每个rgb的值为2位
|
||
if (hex === "0") {
|
||
hex += hex;
|
||
}
|
||
strHex += hex;
|
||
}
|
||
if (strHex.length !== 7) {
|
||
strHex = _this;
|
||
}
|
||
|
||
return strHex;
|
||
} else if (reg.test(_this)) {
|
||
var aNum = _this.replace(/#/, "").split("");
|
||
if (aNum.length === 6) {
|
||
return _this;
|
||
} else if (aNum.length === 3) {
|
||
var numHex = "#";
|
||
for (var i = 0; i < aNum.length; i += 1) {
|
||
numHex += (aNum[i] + aNum[i]);
|
||
}
|
||
return numHex;
|
||
}
|
||
} else {
|
||
return _this;
|
||
}
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped="">
|
||
// 创建一张隐藏的画布 用于取色
|
||
.canvas-box {
|
||
margin-left: 500upx;
|
||
width: 0;
|
||
height: 0;
|
||
overflow: hidden
|
||
}
|
||
|
||
//画廊总容器 静态样式放这里 动态样式放template
|
||
.gallerypanel {
|
||
.scroll-view {
|
||
.scroll-view-panle {
|
||
display: flex;
|
||
height: 100%;
|
||
width: 100%;
|
||
white-space: nowrap;
|
||
|
||
.leftview {
|
||
//动态
|
||
}
|
||
|
||
.imgviewpanel {
|
||
.角标 {}
|
||
|
||
.imgview {
|
||
.图片 {}
|
||
}
|
||
|
||
.描述 {
|
||
.文本 {}
|
||
}
|
||
}
|
||
|
||
.rightview {
|
||
//动态
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 隐藏滚动条 hbx1.8版本 这样写有错误（伪类错误） 需要把这代码放到小程序工具的main.wsxx中去
|
||
// .gallerypanel ::-webkit-scrollbar {display: none;}
|
||
// .scroll-view ::-webkit-scrollbar {
|
||
// display: none;
|
||
// }
|
||
|
||
|
||
.roundbadge {
|
||
z-index: 2;
|
||
display: flex;
|
||
align-self: flex-end;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 12px;
|
||
color: white;
|
||
border-radius: 8px;
|
||
min-width: 12px;
|
||
min-height: 12px;
|
||
max-height: 12px;
|
||
padding: 3px 5px;
|
||
margin-bottom: -17px; //17=12+5 12是圆角角标高度 5是图片中间的边距
|
||
margin-right: 3px; //右边距是5px 这里取3
|
||
}
|
||
|
||
* {
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
|
||
// 呼吸帧
|
||
@keyframes living {
|
||
0% {
|
||
// transform-origin:'center bottom';
|
||
transform: scale(1);
|
||
opacity: 1;
|
||
}
|
||
|
||
50% {
|
||
// transform-origin:'center bottom';
|
||
transform: scale(1.05);
|
||
opacity: 1;
|
||
/*圆形放大的同时，透明度逐渐减小为0*/
|
||
}
|
||
|
||
100% {
|
||
// transform-origin:'center bottom';
|
||
transform: scale(1);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
.trans-fadeout {
|
||
// -webkit-transition:all 0.2s linear;
|
||
// -moz-transition:all 0.2s linear;
|
||
// -ms-transition:all 0.2s linear;
|
||
// -o-transition:all 0.2s linear;
|
||
animation: living 1s ease-in-out 1;
|
||
}
|
||
</style>
|