Skip to content

W
wangjin-front-end
Commit 5c16d50a authored by 张媛's avatar 张媛
Browse files
Options

添加react真实数据轮播

parent 366ef040
Hide whitespace changes
Inline Side-by-side
Showing with 881 additions and 404 deletions
src/asserts/resource/react-lunbo-real-data.gif 0 → 100644
View file @ 5c16d50a
This diff is collapsed.
src/canvasCom/carouselCom/carousel.stories.tsx
View file @ 5c16d50a
import React from 'react';
import { CarouselCom } from './carouselCom';
import { CodeCom } from "./codeCom"
import React from "react";
import { CarouselCom } from "./carouselCom";
import { CodeCom } from "./codeCom";
import {
Title,
Subtitle,
Description,
ArgsTable,
PRIMARY_STORY,
} from '@storybook/addon-docs';
import { clearStage } from '../../common/createStage';
Title,
Subtitle,
Description,
ArgsTable,
PRIMARY_STORY,
} from "@storybook/addon-docs";
import { clearStage } from "../../common/createStage";
import {Story, Meta} from '@storybook/react/types-6-0';
import { Story, Meta } from "@storybook/react/types-6-0";
class carouselItem extends window.FYGE.Container {
constructor(data) {
super();
let itemBg = window.FYGE.Sprite.fromUrl("resource/prizeItemBg.png");
this.addChild(itemBg);
let itemName = new window.FYGE.TextField();
itemName.text = data.name;
itemName.size = 24;
itemName.fillColor = "#000000";
itemName.textAlign = window.FYGE.TEXT_ALIGN.CENTER;
itemName.textWidth = 194;
this.addChild(itemName);
itemName.position.set(0, 200);
let itemImg = window.FYGE.Sprite.fromUrl(data.icon);
itemBg.addChild(itemImg);
itemImg.width = 183;
itemImg.height = 183;
itemImg.position.set(5, 5);
}
constructor(data) {
super();
let itemBg = window.FYGE.Sprite.fromUrl("resource/prizeItemBg.png");
this.addChild(itemBg);
let itemName = new window.FYGE.TextField();
itemName.text = data.name;
itemName.size = 24;
itemName.fillColor = "#000000";
itemName.textAlign = window.FYGE.TEXT_ALIGN.CENTER;
itemName.textWidth = 194;
this.addChild(itemName);
itemName.position.set(0, 200);
let itemImg = window.FYGE.Sprite.fromUrl(data.icon);
itemBg.addChild(itemImg);
itemImg.width = 183;
itemImg.height = 183;
itemImg.position.set(5, 5);
}
}
export default {
component: CarouselCom,
title: 'Canvas组件/轮播组件',
//👇 Creates specific argTypes
parameters: {
layout: 'centered',
docs: {
page: () => {
clearStage();
return( <>
<Title />
<Subtitle />
<Description />
<ArgsTable story={PRIMARY_STORY} />
<CodeCom/>
</>)
component: CarouselCom,
title: "Canvas组件/横竖轮播组件",
//👇 Creates specific argTypes
parameters: {
layout: "centered",
docs: {
page: () => {
clearStage();
return (
<>
<Title />
<Subtitle />
<Description />
<ArgsTable story={PRIMARY_STORY} />
<CodeCom />
</>
);
},
},
}
},
},
} as Meta;
//👇 We create a “template” of how args map to rendering
const Template = (args) => <CarouselCom {...args} />;
......@@ -58,89 +59,88 @@ const Template = (args) => <CarouselCom {...args} />;
//👇 Each story then reuses that template
export const Primary = Template.bind({});
Primary.args = {
primary: true,
label: '金币动效',
carouselItem:carouselItem,
itemWidth:204,
itemHeight:242,
vertical:false,
num:3,
k:0.3,
x:100,
y:100,
data:[
{
"rule": "ru_1",
"name": "飞科剃须刀1",
"icon": "resource/prize.jpg",
"coins": 10000,
"stock": 111111111111,
"channel":0
},
{
"rule": "ru_1",
"name": "飞科剃须刀2",
"icon": "resource/prize.jpg",
"coins": 100,
"stock": 0,
"channel":0
},
{
"rule": "ru_1",
"name": "飞科剃须刀3",
"icon": "resource/prize.jpg",
"coins": 100,
"stock": 0,
"channel":0
},
{
"rule": "ru_1",
"name": "飞科剃须刀4",
"icon": "resource/prize.jpg",
"coins": 100,
"stock": 0,
"channel":2
},
{
"rule": "ru_1",
"name": "飞科剃须刀5",
"icon": "resource/prize.jpg",
"coins": 100,
"stock": 0,
"channel":2
},
{
"rule": "ru_1",
"name": "飞科剃须刀6",
"icon": "resource/prize.jpg",
"coins": 100,
"stock": 0,
"channel":1
},
{
"rule": "ru_1",
"name": "飞科剃须刀7",
"icon": "resource/prize.jpg",
"coins": 100,
"stock": 1,
"channel":0
},
{
"rule": "ru_1",
"name": "飞科剃须刀8",
"icon": "resource/prize.jpg",
"coins": 100,
"stock": 1,
"channel":2
},
{
"rule": "ru_1",
"name": "飞科剃须刀0",
"icon": "resource/prize.jpg",
"coins": 100,
"stock": 1,
"channel":2
}
]
primary: true,
label: "金币动效",
carouselItem: carouselItem,
itemWidth: 204,
itemHeight: 242,
vertical: false,
num: 3,
k: 0.3,
x: 100,
y: 100,
data: [
{
rule: "ru_1",
name: "飞科剃须刀1",
icon: "resource/prize.jpg",
coins: 10000,
stock: 111111111111,
channel: 0,
},
{
rule: "ru_1",
name: "飞科剃须刀2",
icon: "resource/prize.jpg",
coins: 100,
stock: 0,
channel: 0,
},
{
rule: "ru_1",
name: "飞科剃须刀3",
icon: "resource/prize.jpg",
coins: 100,
stock: 0,
channel: 0,
},
{
rule: "ru_1",
name: "飞科剃须刀4",
icon: "resource/prize.jpg",
coins: 100,
stock: 0,
channel: 2,
},
{
rule: "ru_1",
name: "飞科剃须刀5",
icon: "resource/prize.jpg",
coins: 100,
stock: 0,
channel: 2,
},
{
rule: "ru_1",
name: "飞科剃须刀6",
icon: "resource/prize.jpg",
coins: 100,
stock: 0,
channel: 1,
},
{
rule: "ru_1",
name: "飞科剃须刀7",
icon: "resource/prize.jpg",
coins: 100,
stock: 1,
channel: 0,
},
{
rule: "ru_1",
name: "飞科剃须刀8",
icon: "resource/prize.jpg",
coins: 100,
stock: 1,
channel: 2,
},
{
rule: "ru_1",
name: "飞科剃须刀0",
icon: "resource/prize.jpg",
coins: 100,
stock: 1,
channel: 2,
},
],
};
src/canvasCom/progressBarSCom/progressBarS.stories.tsx
View file @ 5c16d50a
import React from 'react';
import { ProgressBarSCom } from './progressBarSCom';
import { CodeCom } from "./codeCom"
import React from "react";
import { ProgressBarSCom } from "./progressBarSCom";
import { CodeCom } from "./codeCom";
import {
Title,
Subtitle,
Description,
ArgsTable,
PRIMARY_STORY,
} from '@storybook/addon-docs';
import { clearStage } from '../../common/createStage';
Title,
Subtitle,
Description,
ArgsTable,
PRIMARY_STORY,
} from "@storybook/addon-docs";
import { clearStage } from "../../common/createStage";
export default {
component: ProgressBarSCom,
title: 'Canvas组件/进度条',
//👇 Creates specific argTypes
parameters: {
layout: 'centered',
docs: {
page: () => {
clearStage();
return( <>
<Title />
<Subtitle />
<Description />
<ArgsTable story={PRIMARY_STORY} />
<CodeCom></CodeCom>
</>)
component: ProgressBarSCom,
title: "Canvas组件/进度条",
//👇 Creates specific argTypes
parameters: {
layout: "centered",
docs: {
page: () => {
clearStage();
return (
<>
<Title />
<Subtitle />
<Description />
<ArgsTable story={PRIMARY_STORY} />
<CodeCom></CodeCom>
</>
);
},
},
}
},
},
};
//👇 We create a “template” of how args map to rendering
......@@ -36,5 +38,3 @@ const Template = () => <ProgressBarSCom />;
//👇 Each story then reuses that template
export const Primary = Template.bind({});
src/canvasCom/progressBarSCom/progressBarSCom.tsx
View file @ 5c16d50a
import React from 'react';
import {ProgressBarS} from "../../sourceCode/canvas/ProgressBarS";
import {createStage,isExistStage} from "../../common/createStage";
import React from "react";
import { ProgressBarS } from "../../sourceCode/canvas/ProgressBarS";
import { createStage, isExistStage } from "../../common/createStage";
export const ProgressBarSCom = ()=>{
export const ProgressBarSCom = () => {
createStage();
window.stage.removeAllChildren();
isExistStage(()=>{
isExistStage(() => {
//进度条底图
//@ts-ignore
var proBg = window.stage.addChild(FYGE.Sprite.fromUrl("resource/loadWhiteBar.png"))
var proBg = window.stage.addChild(
FYGE.Sprite.fromUrl("resource/loadWhiteBar.png")
);
proBg.position.set(100, 200);
//进度文字展示
......@@ -16,37 +18,39 @@ export const ProgressBarSCom = ()=>{
var progressBarLabel = new FYGE.TextField();
progressBarLabel.text = "0";
progressBarLabel.size = 24;
progressBarLabel.fillColor = "#ef9222"
progressBarLabel.fillColor = "#ef9222";
progressBarLabel.stroke = 2;
progressBarLabel.strokeColor = "#ffffff"
progressBarLabel.position.set( 450,20);
proBg.addChild(progressBarLabel)
progressBarLabel.strokeColor = "#ffffff";
progressBarLabel.position.set(450, 20);
proBg.addChild(progressBarLabel);
//进度条
//@ts-ignore
var pro = window.stage.addChild(FYGE.Sprite.fromUrl("resource/loadYellowBar.png"));
pro.position.set(112, 208)
var pro = window.stage.addChild(
FYGE.Sprite.fromUrl("resource/loadYellowBar.png")
);
pro.position.set(112, 208);
//进度条托管
var progressBar = new ProgressBarS(pro ,null,(v)=>{
progressBarLabel.text = ((v * 100) >> 0) + "%"
var progressBar = new ProgressBarS(pro, null, (v) => {
progressBarLabel.text = ((v * 100) >> 0) + "%";
});
//监听进度条前进信息
//@ts-ignore
window.stage.addEventListener(FYGE.Event.PROGRESS, (e)=>{
let pro = e.data;
//@ts-ignore
FYGE.Tween.get(progressBar)
.to({ value: pro }, 2000)
}, window.stage);
window.stage.addEventListener(
FYGE.Event.PROGRESS,
(e) => {
let pro = e.data;
//@ts-ignore
FYGE.Tween.get(progressBar).to({ value: pro }, 2000);
},
window.stage
);
//触发进度条前进
//@ts-ignore
window.stage.dispatchEvent(FYGE.Event.PROGRESS, 1);
})
return (
<div></div>
)
}
\ No newline at end of file
});
return <div></div>;
};
src/common/createStage.ts
View file @ 5c16d50a
export const createStage = ()=>{
const height = document.body.clientHeight*(window.devicePixelRatio || 1)||1624;
const width = document.body.clientWidth*(window.devicePixelRatio || 1)||750;
export const createStage = () => {
const height = document.body.clientHeight * (window.devicePixelRatio || 1) || 1624;
const width = document.body.clientWidth * (window.devicePixelRatio || 1) || 750;
// const height = 800;
// const width = 750;
const scale = window.devicePixelRatio;
let canvas = document.getElementById("canvas-container");
if(!canvas){
if (!canvas) {
canvas = document.createElement("canvas");
canvas.setAttribute("id","canvas-container")
canvas.setAttribute("height",height+"");
canvas.setAttribute("width",width+"");
canvas.style.position = "absolute";
canvas.setAttribute("id", "canvas-container")
canvas.setAttribute("height", height + "");
canvas.setAttribute("width", width + "");
canvas.style.position = "absolute";
canvas.style.top = 0 + "px";
canvas.style.left = 0 + "px";
document.body.appendChild(canvas);
}else{
} else {
return;
}
var stage = new window.FYGE.Stage(
......@@ -27,20 +27,20 @@ export const createStage = ()=>{
false,
false
)
//点击事件绑定
var mouseEvent = stage.onMouseEvent.bind(stage);
canvas.addEventListener("touchstart",mouseEvent,false);
canvas.addEventListener("touchmove",mouseEvent,false);
canvas.addEventListener("touchend",mouseEvent,false);
canvas.addEventListener("touchstart", mouseEvent, false);
canvas.addEventListener("touchmove", mouseEvent, false);
canvas.addEventListener("touchend", mouseEvent, false);
canvas.addEventListener("mousedown",mouseEvent,false);
canvas.addEventListener("mousemove",mouseEvent,false);
canvas.addEventListener("mouseup",mouseEvent,false);
canvas.addEventListener("mousedown", mouseEvent, false);
canvas.addEventListener("mousemove", mouseEvent, false);
canvas.addEventListener("mouseup", mouseEvent, false);
// canvas.addEventListener("click",mouseEvent,false);
function loop() {
function loop() {
stage.flush();
window.FYGE.Tween.flush();
requestAnimationFrame(loop);
......@@ -49,14 +49,14 @@ export const createStage = ()=>{
loop();
window.stage = stage;
}
export const isExistStage = (cb)=>{
if(window.stage){
export const isExistStage = (cb) => {
if (window.stage) {
cb && cb();
}else{
setTimeout(isExistStage,100);
} else {
setTimeout(isExistStage, 100);
}
}
export const clearStage = ()=>{
export const clearStage = () => {
let canvas = document.getElementById("canvas-container");
if(canvas)document.body.removeChild(canvas);
}
\ No newline at end of file
if (canvas) document.body.removeChild(canvas);
}
\ No newline at end of file
src/docs/data/comData.ts
View file @ 5c16d50a
export const canvasData =[
export const canvasData = [
{
name:"金币动效",
imgUrl:"/resource/金币动效.gif",
href:"金币动效"
name: "金币动效",
imgUrl: "/resource/金币动效.gif",
href: "金币动效"
},
{
name:"轮播组件",
imgUrl:"/resource/轮播.gif",
href:"轮播组件"
name: "横竖轮播组件",
imgUrl: "/resource/轮播.gif",
href: "横竖轮播组件"
},
{
name:"多边形坐标系统",
imgUrl:"/resource/多边形坐标系统.gif",
href:"多边形坐标系统"
name: "多边形坐标系统",
imgUrl: "/resource/多边形坐标系统.gif",
href: "多边形坐标系统"
},
{
name:"丰富文本",
imgUrl:"/resource/丰富文本.gif",
href:"丰富文本"
name: "丰富文本",
imgUrl: "/resource/丰富文本.gif",
href: "丰富文本"
},
{
name:"进度条",
imgUrl:"/resource/progressBarS.gif",
href:"进度条"
name: "进度条",
imgUrl: "/resource/progressBarS.gif",
href: "进度条"
},
{
name:"弹幕",
imgUrl:"/resource/canvasDanmu.gif",
href:"弹幕"
name: "弹幕",
imgUrl: "/resource/canvasDanmu.gif",
href: "弹幕"
},
{
name:"大转盘",
imgUrl:"/resource/canvasDazhuanpan.gif",
href:"大转盘"
name: "大转盘",
imgUrl: "/resource/canvasDazhuanpan.gif",
href: "大转盘"
}
]
export const reactData =[
export const reactData = [
{
name:"弹幕",
imgUrl:"/resource/reactDanmu.gif",
href:"弹幕"
}
name: "弹幕",
imgUrl: "/resource/reactDanmu.gif",
href: "弹幕"
},
{
name: "轮播(真实数据)",
imgUrl: "/resource/react-lunbo-real-data.gif",
href: "轮播(真实数据)"
},
]
\ No newline at end of file
src/reactCom/LunboRealData/LunboRealData.stories.tsx 0 → 100644
View file @ 5c16d50a
import React from "react";
import { Lunbo } from "../../sourceCode/react/LunboRealData/index";
import {
Title,
Subtitle,
Description,
ArgsTable,
PRIMARY_STORY,
} from "@storybook/addon-docs";
import { CodeCom } from "./codeCom";
import { clearStage } from "../../common/createStage";
export default {
component: Lunbo,
title: "React组件/轮播(真实数据)",
parameters: {
docs: {
page: () => {
clearStage();
return (
<>
<Title />
<Subtitle />
<Description />
<ArgsTable story={PRIMARY_STORY} />
<CodeCom></CodeCom>
</>
);
},
},
},
};
function getRondomNum(len) {
len = len || 4;
var $chars =
"0123456789"; /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
var maxPos = $chars.length;
var pwd = "";
for (let i = 0; i < len; i++) {
pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
}
return pwd;
}
function getCarouselData() {
let data = [];
for (let i = 0; i < 19; i++) {
data.push({
text: "尾号" + getRondomNum(4) + "获得了话费劵",
});
}
data.push({
text: "尾号" + getRondomNum(4) + "获得了戴森吹风机",
});
return data;
}
const carouselData = getCarouselData();
const Template = (args) => <Lunbo {...args} />;
export const Primary = Template.bind({});
Primary.args = {
primary: false,
label: "LunboRealData",
carouselData: carouselData,
};
Primary.parameters = {
layout: "centered",
};
src/reactCom/LunboRealData/codeCom.tsx 0 → 100644
View file @ 5c16d50a
import React from "react";
import { UnControlled as CodeMirror } from "react-codemirror2";
const jsBeautify = require("js-beautify").html;
interface Props {
code: string;
}
const CodePanel = (args: Props) => {
return (
<div className="code">
<CodeMirror
value={args.code}
options={{
mode: "javascript",
theme: "dracula",
lineNumbers: true,
lineWrapping: false,
indentWithTabs: true,
smartIndent: true,
}}
/>
</div>
);
};
const StylePanel = (args: Props) => {
return (
<div className="code">
<CodeMirror
value={args.code}
options={{
mode: "css",
theme: "dracula",
lineNumbers: true,
lineWrapping: false,
indentWithTabs: true,
smartIndent: true,
}}
/>
</div>
);
};
export const CodeCom = () => {
let useCode = getUseCodeStr();
let sourceCode = getSourceCode();
let comStyleStr = getComStyleStr();
return (
<div className="codeContainer">
<label className="title">组件使用代码：</label>
<CodePanel code={useCode} />
<label className="title">组件轮播源码代码：</label>
<CodePanel code={sourceCode} />
<label className="title">组件LunboCtrl样式：</label>
<StylePanel code={comStyleStr} />
</div>
);
};
const getComStyleStr = () => {
return `
.articleShuffling {
width: 750px;
height: 53px;
left: 0px;
top: 0px;
position: absolute;
overflow-y: hidden;
background-color: red;
.rollup {
width: 750px;
top: 0px;
position: absolute;
box-sizing: border-box;
white-space: nowrap;
pointer-events: none;
.user1885678ObtainedXxx {
display: block;
width: 750px;
height: 53px;
text-align: center;
left: 0px;
top: 0px;
font-size: 24px;
line-height: 53px;
color: rgba(255, 255, 255, 1);
}
}
}
`;
};
//使用代码
const getUseCodeStr = () => {
return `
export const Lunbo = (data) => {
const LunboCom = LunboCtrl(data.carouselData);
return (
<>
<LunboCom />
</>
);
};
`;
};
//源码
const getSourceCode = () => {
return `
import React, { Component } from "react";
import "./LunboRealData.less";
export default function LunboCtrl(carouselData) {
return class LunboCom extends Component {
constructor(props) {
super(props);
this.state = {
top1: 0,
top2: 0,
};
this.itemHeight = 0; //列表项的真实高度取整后的值
this.step = 1; //步长
this.totalStep = 0; //记录每一次列表项消失走的步数
this.itemHeightDot = 0.0; //列表项的真实高度
this.totalHeight = 0; //一个列表的高度
}
loop() {
let timer = setTimeout(() => {
clearTimeout(timer);
let top1 = this.state.top1;
let top2 = this.state.top2;
if (top1 + this.totalHeight === 0) {
top1 = this.totalHeight;
}
if (top2 + this.totalHeight === 0) {
top2 = this.totalHeight;
}
this.setState({
top1: top1 - this.step,
top2: top2 - this.step,
});
this.totalStep = this.totalStep + 1;
if (this.totalStep === this.itemHeight) {
this.totalStep = -1;
this.step = this.itemHeightDot - this.itemHeight;
setTimeout(() => {
this.loop();
}, 1000);
} else {
this.step = 1;
this.loop();
}
}, 40);
}
componentDidMount() {
let el = document.getElementById("articleShuffling");
let lenstr = window.getComputedStyle(el).webkitLogicalHeight;
this.itemHeightDot = Number(lenstr.slice(0, lenstr.length - 2));
this.itemHeight = parseInt(this.itemHeightDot);
this.totalHeight = this.itemHeightDot * carouselData.length;
this.setState({
top1: 0,
top2: this.totalHeight,
});
setTimeout(() => {
this.loop();
}, 1000);
}
render() {
return (
<div id="articleShuffling" className="articleShuffling">
<div className="rollup ">
<div
style={{
boxSizing: "border-box",
position: "absolute",
top: this.state.top1 + "px",
}}
>
{carouselData.map((item, index) => {
return (
<span
key={index}
className="user1885678ObtainedXxx"
>
{item.text}
</span>
);
})}
</div>
<div
style={{
boxSizing: "border-box",
position: "absolute",
top: this.state.top2 + "px",
}}
>
{carouselData.map((item, index) => {
return (
<span
key={index}
className="user1885678ObtainedXxx"
>
{item.text}
</span>
);
})}
</div>
</div>
</div>
);
}
};
}
`;
};
src/reactCom/danma/Danma.stories.tsx
View file @ 5c16d50a
import React from 'react';
import React from "react";
import { Danma } from "../../sourceCode/react/danma/danma";
import DanmaItem from '../../sourceCode/react/danma/danmaItem';
import DanmaItem from "../../sourceCode/react/danma/danmaItem";
import {
Title,
Subtitle,
Description,
ArgsTable,
PRIMARY_STORY,
} from '@storybook/addon-docs';
import { CodeCom } from './codeCom';
import { clearStage } from '../../common/createStage';
Title,
Subtitle,
Description,
ArgsTable,
PRIMARY_STORY,
} from "@storybook/addon-docs";
import { CodeCom } from "./codeCom";
import { clearStage } from "../../common/createStage";
export default {
component: Danma,
title: 'React组件/弹幕',
parameters: {
docs: {
page: () => {
clearStage();
return( <>
<Title />
<Subtitle />
<Description />
<ArgsTable story={PRIMARY_STORY} />
<CodeCom></CodeCom>
</>)
},
}
},
component: Danma,
title: "React组件/弹幕",
parameters: {
docs: {
page: () => {
clearStage();
return (
<>
<Title />
<Subtitle />
<Description />
<ArgsTable story={PRIMARY_STORY} />
<CodeCom></CodeCom>
</>
);
},
},
},
};
let danmaAvatars = ["//yun.duiba.com.cn/polaris/1022.5d0247352e3f1a068cd812df9051079b111ef0a5.jpg"
, "//yun.duiba.com.cn/polaris/1022.5d0247352e3f1a068cd812df9051079b111ef0a5.jpg"
,
"//yun.duiba.com.cn/polaris/1020.dc6994ddeb5726f99a5ab9692f1a339ecd46a99b.jpg"
,
"//yun.duiba.com.cn/polaris/1009.3307be2f8053aad97259c34062934185a200eac4.jpg"
,
"//yun.duiba.com.cn/polaris/226.24bc5cff2e5ce9786f3f91822073a8e07d8e72a2.jpg"
,
"//yun.duiba.com.cn/polaris/167.86ddf7a8a38a1f3d65b1eaea8b366ea865455d5f.jpg"
,
"//yun.duiba.com.cn/polaris/160.4e523285ae71ca3102ebf5abcec94c768a03dee3.jpg"
,
"//yun.duiba.com.cn/polaris/152.ad66124d7a5bb408aab23dc4df6b3a48d5cc3e3d.jpg"
,
"//yun.duiba.com.cn/polaris/151.c780044a45f4bb54886abc0c6ced752c646c9258.jpg"
, "//yun.duiba.com.cn/polaris/93.e03b23d831096c181f5a216e851890fe9720a529.jpg"
,
"//yun.duiba.com.cn/polaris/74.583f9804214c592abbdb20d9bc22699016a14111.jpg"
,
"//yun.duiba.com.cn/polaris/13.74093d5f56cfd4407cb1364a0b39420c1cf6cd49.jpg"
,
"//yun.duiba.com.cn/polaris/21.20b8b067a25a8217cd4be2934e55a4fcaf090f11.jpg"
,
"//yun.duiba.com.cn/polaris/32.886b712236952e68b52bb8c9ed489aa71e4696eb.jpg"
,
"//yun.duiba.com.cn/polaris/35.556e40e6e2c1f47e0907b35faef3470990565778.jpg"
,
"//yun.duiba.com.cn/polaris/46.acb5c7e7abd8b8f476bd3e495b253412e537578a.jpg"
,
"//yun.duiba.com.cn/polaris/51.21cf0c7f2784616b92470559a2b259668bb35465.jpg"
, "//yun.duiba.com.cn/polaris/91.e7db79153cab5dfeb0ed05c5ac0efad7ed2c0f62.jpg"
,
"//yun.duiba.com.cn/polaris/110.6f9d23a83f44b22bce4b580380c65e65e5e69d88.jpg"
,
"//yun.duiba.com.cn/polaris/296.cbff50bfde5f4d61461f486f2a37ae8aa495eed9.jpg"
, "//yun.duiba.com.cn/polaris/248.d535ab0bb6ed1bad5f863c161ffe7e53adcf129c.jpg"
, "//yun.duiba.com.cn/polaris/389.81c5dc97d4f5f7c409a7463cc1d64c15395e9ccf.jpg"
, "//yun.duiba.com.cn/polaris/21.20b8b067a25a8217cd4be2934e55a4fcaf090f11.jpg"
, "//yun.duiba.com.cn/polaris/21.20b8b067a25a8217cd4be2934e55a4fcaf090f11.jpg"
]
let danmaAvatars = [
"//yun.duiba.com.cn/polaris/1022.5d0247352e3f1a068cd812df9051079b111ef0a5.jpg",
"//yun.duiba.com.cn/polaris/1022.5d0247352e3f1a068cd812df9051079b111ef0a5.jpg",
"//yun.duiba.com.cn/polaris/1020.dc6994ddeb5726f99a5ab9692f1a339ecd46a99b.jpg",
"//yun.duiba.com.cn/polaris/1009.3307be2f8053aad97259c34062934185a200eac4.jpg",
"//yun.duiba.com.cn/polaris/226.24bc5cff2e5ce9786f3f91822073a8e07d8e72a2.jpg",
"//yun.duiba.com.cn/polaris/167.86ddf7a8a38a1f3d65b1eaea8b366ea865455d5f.jpg",
"//yun.duiba.com.cn/polaris/160.4e523285ae71ca3102ebf5abcec94c768a03dee3.jpg",
"//yun.duiba.com.cn/polaris/152.ad66124d7a5bb408aab23dc4df6b3a48d5cc3e3d.jpg",
"//yun.duiba.com.cn/polaris/151.c780044a45f4bb54886abc0c6ced752c646c9258.jpg",
"//yun.duiba.com.cn/polaris/93.e03b23d831096c181f5a216e851890fe9720a529.jpg",
"//yun.duiba.com.cn/polaris/74.583f9804214c592abbdb20d9bc22699016a14111.jpg",
"//yun.duiba.com.cn/polaris/13.74093d5f56cfd4407cb1364a0b39420c1cf6cd49.jpg",
"//yun.duiba.com.cn/polaris/21.20b8b067a25a8217cd4be2934e55a4fcaf090f11.jpg",
"//yun.duiba.com.cn/polaris/32.886b712236952e68b52bb8c9ed489aa71e4696eb.jpg",
"//yun.duiba.com.cn/polaris/35.556e40e6e2c1f47e0907b35faef3470990565778.jpg",
"//yun.duiba.com.cn/polaris/46.acb5c7e7abd8b8f476bd3e495b253412e537578a.jpg",
"//yun.duiba.com.cn/polaris/51.21cf0c7f2784616b92470559a2b259668bb35465.jpg",
"//yun.duiba.com.cn/polaris/91.e7db79153cab5dfeb0ed05c5ac0efad7ed2c0f62.jpg",
"//yun.duiba.com.cn/polaris/110.6f9d23a83f44b22bce4b580380c65e65e5e69d88.jpg",
"//yun.duiba.com.cn/polaris/296.cbff50bfde5f4d61461f486f2a37ae8aa495eed9.jpg",
"//yun.duiba.com.cn/polaris/248.d535ab0bb6ed1bad5f863c161ffe7e53adcf129c.jpg",
"//yun.duiba.com.cn/polaris/389.81c5dc97d4f5f7c409a7463cc1d64c15395e9ccf.jpg",
"//yun.duiba.com.cn/polaris/21.20b8b067a25a8217cd4be2934e55a4fcaf090f11.jpg",
"//yun.duiba.com.cn/polaris/21.20b8b067a25a8217cd4be2934e55a4fcaf090f11.jpg",
];
let getPhoneNum = () => {
let phoneHead = [181, 156, 131, 176, 138, 135]
let head = phoneHead[Math.floor(Math.random() * phoneHead.length)]
let bottomNum = "" + (Math.floor(Math.random() * 10)) + (Math.floor(Math.random() * 10)) + (Math.floor(Math.random() * 10)) + (Math.floor(Math.random() * 10))
let phoneHead = [181, 156, 131, 176, 138, 135];
let head = phoneHead[Math.floor(Math.random() * phoneHead.length)];
let bottomNum =
"" +
Math.floor(Math.random() * 10) +
Math.floor(Math.random() * 10) +
Math.floor(Math.random() * 10) +
Math.floor(Math.random() * 10);
return head + "****" + bottomNum
}
return head + "****" + bottomNum;
};
let getPrize = () => {
let prizes = ["100元立减金", "电影票X4", "爱国者耳机", "5元立减金", "100元立减金"]
return prizes[(Math.floor(Math.random() * prizes.length))]
}
let prizes = [
"100元立减金",
"电影票X4",
"爱国者耳机",
"5元立减金",
"100元立减金",
];
return prizes[Math.floor(Math.random() * prizes.length)];
};
let danmaData = [{ danmaText: getPhoneNum() + "获得" + getPrize(), danmaAvatar: danmaAvatars[Math.floor(Math.random() * danmaAvatars.length - 1)] },
{ danmaText: getPhoneNum() + "获得" + getPrize(), danmaAvatar: danmaAvatars[Math.floor(Math.random() * danmaAvatars.length - 1)] },
{ danmaText: getPhoneNum() + "获得" + getPrize(), danmaAvatar: danmaAvatars[Math.floor(Math.random() * danmaAvatars.length - 1)] },
{ danmaText: getPhoneNum() + "获得" + getPrize(), danmaAvatar: danmaAvatars[Math.floor(Math.random() * danmaAvatars.length - 1)] },
{ danmaText: getPhoneNum() + "获得" + getPrize(), danmaAvatar: danmaAvatars[Math.floor(Math.random() * danmaAvatars.length - 1)] },
{ danmaText: getPhoneNum() + "获得" + getPrize(), danmaAvatar: danmaAvatars[Math.floor(Math.random() * danmaAvatars.length - 1)] },
{ danmaText: getPhoneNum() + "获得" + getPrize(), danmaAvatar: danmaAvatars[Math.floor(Math.random() * danmaAvatars.length - 1)] },
{ danmaText: getPhoneNum() + "获得" + getPrize(), danmaAvatar: danmaAvatars[Math.floor(Math.random() * danmaAvatars.length - 1)] }]
let danmaData = [
{
danmaText: getPhoneNum() + "获得" + getPrize(),
danmaAvatar:
danmaAvatars[Math.floor(Math.random() * danmaAvatars.length - 1)],
},
{
danmaText: getPhoneNum() + "获得" + getPrize(),
danmaAvatar:
danmaAvatars[Math.floor(Math.random() * danmaAvatars.length - 1)],
},
{
danmaText: getPhoneNum() + "获得" + getPrize(),
danmaAvatar:
danmaAvatars[Math.floor(Math.random() * danmaAvatars.length - 1)],
},
{
danmaText: getPhoneNum() + "获得" + getPrize(),
danmaAvatar:
danmaAvatars[Math.floor(Math.random() * danmaAvatars.length - 1)],
},
{
danmaText: getPhoneNum() + "获得" + getPrize(),
danmaAvatar:
danmaAvatars[Math.floor(Math.random() * danmaAvatars.length - 1)],
},
{
danmaText: getPhoneNum() + "获得" + getPrize(),
danmaAvatar:
danmaAvatars[Math.floor(Math.random() * danmaAvatars.length - 1)],
},
{
danmaText: getPhoneNum() + "获得" + getPrize(),
danmaAvatar:
danmaAvatars[Math.floor(Math.random() * danmaAvatars.length - 1)],
},
{
danmaText: getPhoneNum() + "获得" + getPrize(),
danmaAvatar:
danmaAvatars[Math.floor(Math.random() * danmaAvatars.length - 1)],
},
];
let speed = [1, 3, 2, 1, 4]
let width = 400
let height = 60
let speed = [1, 3, 2, 1, 4];
let width = 400;
let height = 60;
//@ts-ignore
// const Template = () => <Danma DanmaItem={DanmaItem} danmaData={danmaData} speed={speed} width={width} height={height} />;
const Template = (args) => <Danma {...args}/>;
const Template = (args) => <Danma {...args} />;
export const Primary = Template.bind({});
Primary.args = {
primary: false,
label: 'Danma',
DanmaItem: DanmaItem,
danmaData: danmaData,
speed:speed,
width:width,
height:height
primary: false,
label: "Danma",
DanmaItem: DanmaItem,
danmaData: danmaData,
speed: speed,
width: width,
height: height,
};
Primary.parameters = {
layout: 'centered',
};
\ No newline at end of file
layout: "centered",
};
src/reactCom/danma/codeCom.tsx
View file @ 5c16d50a
import React from 'react';
import React from "react";
import { UnControlled as CodeMirror } from 'react-codemirror2';
import { UnControlled as CodeMirror } from "react-codemirror2";
const jsBeautify = require("js-beautify").html;
interface Props {
code:string
code: string;
}
const CodePanel =(args:Props) => {
return(
<div className = "code">
<CodeMirror
value={args.code}
options = {{
mode:"javascript",
theme:"dracula",
lineNumbers: true,
lineWrapping: false,
indentWithTabs: true,
smartIndent: true,
}}
const CodePanel = (args: Props) => {
return (
<div className="code">
<CodeMirror
value={args.code}
options={{
mode: "javascript",
theme: "dracula",
lineNumbers: true,
lineWrapping: false,
indentWithTabs: true,
smartIndent: true,
}}
/>
</div>
)
}
const StylePanel = (args:Props)=>{
return(
<div className = "code">
<CodeMirror
value={args.code}
options = {{
mode:"css",
theme:"dracula",
lineNumbers: true,
lineWrapping: false,
indentWithTabs: true,
smartIndent: true,
}}
);
};
const StylePanel = (args: Props) => {
return (
<div className="code">
<CodeMirror
value={args.code}
options={{
mode: "css",
theme: "dracula",
lineNumbers: true,
lineWrapping: false,
indentWithTabs: true,
smartIndent: true,
}}
/>
</div>
)
}
export const CodeCom = ()=>{
);
};
export const CodeCom = () => {
let useCode = getUseCodeStr();
let sourceCode = getSourceCode();
let itemCodeStr = getItemCodeStr();
let itemStyleStr = getItemStyleStr();
let comStyleStr = getComStyleStr();
return (
<div className = "codeContainer">
<div className="codeContainer">
<label className="title">组件使用代码：</label>
<CodePanel code ={useCode}/>
<CodePanel code={useCode} />
<label className="title">danmaItem源码：</label>
<CodePanel code ={itemCodeStr}/>
<CodePanel code={itemCodeStr} />
<label className="title">danmaItem样式：</label>
<StylePanel code ={itemStyleStr}/>
<StylePanel code={itemStyleStr} />
<label className="title">组件Danma源码代码：</label>
<CodePanel code ={sourceCode}/>
<CodePanel code={sourceCode} />
<label className="title">组件Danma样式：</label>
<StylePanel code ={comStyleStr}/>
<StylePanel code={comStyleStr} />
</div>
)
}
);
};
const getItemCodeStr = () =>{
const getItemCodeStr = () => {
return `
'use strict';
......@@ -102,9 +101,9 @@ class DanmaItem extends Component {
export default DanmaItem;
`
}
const getItemStyleStr = ()=>{
`;
};
const getItemStyleStr = () => {
return `
.dan_mu_2 {
width: 387px;
......@@ -163,10 +162,10 @@ const getItemStyleStr = ()=>{
}
}
}
`
}
`;
};
const getComStyleStr = ()=>{
const getComStyleStr = () => {
return `
.codeText {
width: 750px;
......@@ -183,10 +182,10 @@ const getComStyleStr = ()=>{
position: absolute;
display: inline-block;
}
`
}
`;
};
//使用代码
const getUseCodeStr = ()=>{
const getUseCodeStr = () => {
return `
export const Danma = (data) => {
const Danma = DanmaCtrl(data.DanmaItem, data.danmaData, data.speed, data.width, data.height)
......@@ -196,11 +195,11 @@ export const Danma = (data) => {
</>
)
}
`
}
`;
};
//源码
const getSourceCode = ()=>{
return`
const getSourceCode = () => {
return `
import React from "react";
/**
......@@ -348,5 +347,5 @@ export default function DanmaCtrl(DanmaItem, DanmaData, speed, DanmaItemWidth, D
}
};
}
`
}
\ No newline at end of file
`;
};
src/sourceCode/react/LunboRealData/LunboRealData.js 0 → 100644
View file @ 5c16d50a
import React, { Component } from "react";
import "./LunboRealData.less";
export default function LunboCtrl(carouselData) {
return class LunboCom extends Component {
constructor(props) {
super(props);
this.state = {
top1: 0,
top2: 0,
};
this.itemHeight = 0; //列表项的真实高度取整后的值
this.step = 1; //步长
this.totalStep = 0; //记录每一次列表项消失走的步数
this.itemHeightDot = 0.0; //列表项的真实高度
this.totalHeight = 0; //一个列表的高度
}
loop() {
let timer = setTimeout(() => {
clearTimeout(timer);
let top1 = this.state.top1;
let top2 = this.state.top2;
if (top1 + this.totalHeight === 0) {
top1 = this.totalHeight;
}
if (top2 + this.totalHeight === 0) {
top2 = this.totalHeight;
}
this.setState({
top1: top1 - this.step,
top2: top2 - this.step,
});
this.totalStep = this.totalStep + 1;
if (this.totalStep === this.itemHeight) {
this.totalStep = -1;
this.step = this.itemHeightDot - this.itemHeight;
setTimeout(() => {
this.loop();
}, 1000);
} else {
this.step = 1;
this.loop();
}
}, 40);
}
componentDidMount() {
let el = document.getElementById("articleShuffling");
let lenstr = window.getComputedStyle(el).webkitLogicalHeight;
this.itemHeightDot = Number(lenstr.slice(0, lenstr.length - 2));
this.itemHeight = parseInt(this.itemHeightDot);
this.totalHeight = this.itemHeightDot * carouselData.length;
this.setState({
top1: 0,
top2: this.totalHeight,
});
setTimeout(() => {
this.loop();
}, 1000);
}
render() {
return (
<div id="articleShuffling" className="articleShuffling">
<div className="rollup ">
<div
style={{
boxSizing: "border-box",
position: "absolute",
top: this.state.top1 + "px",
}}
>
{carouselData.map((item, index) => {
return (
<span
key={index}
className="user1885678ObtainedXxx"
>
{item.text}
</span>
);
})}
</div>
<div
style={{
boxSizing: "border-box",
position: "absolute",
top: this.state.top2 + "px",
}}
>
{carouselData.map((item, index) => {
return (
<span
key={index}
className="user1885678ObtainedXxx"
>
{item.text}
</span>
);
})}
</div>
</div>
</div>
);
}
};
}
src/sourceCode/react/LunboRealData/LunboRealData.less 0 → 100644
View file @ 5c16d50a
.articleShuffling {
width: 750px;
height: 53px;
left: 0px;
top: 200px;
position: absolute;
overflow-y: hidden;
background-color: red;
.rollup {
width: 750px;
top: 0px;
position: absolute;
box-sizing: border-box;
white-space: nowrap;
pointer-events: none;
.user1885678ObtainedXxx {
display: block;
width: 750px;
height: 53px;
text-align: center;
left: 0px;
top: 0px;
font-size: 24px;
line-height: 53px;
color: rgba(255, 255, 255, 1);
}
}
}
src/sourceCode/react/LunboRealData/index.jsx 0 → 100644
View file @ 5c16d50a
import React from "react";
import LunboCtrl from "./LunboRealData";
import { clearStage } from "../../../common/createStage";
export const Lunbo = (data) => {
clearStage();
const LunboCom = LunboCtrl(data.carouselData);
return (
<>
<LunboCom />
</>
);
};
tsconfig.json deleted 100644 → 0
View file @ 366ef040
{
"files": [
"./typings.d.ts"
]
}
\ No newline at end of file
typings.d.ts deleted 100644 → 0
View file @ 366ef040
declare module "*.md" {
const content: string;
export default content;
}
\ No newline at end of file
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