|
|
|
|
@ -1,16 +1,27 @@
|
|
|
|
|
import { MpSplashDetail, WCUserLogin } from "../../utils/Interface";
|
|
|
|
|
import { Component, PropsWithChildren, useEffect, useState } from "react";
|
|
|
|
|
import Taro from "@tarojs/taro";
|
|
|
|
|
import { Block, View, Text, Image, Button } from "@tarojs/components";
|
|
|
|
|
|
|
|
|
|
import "./message.less";
|
|
|
|
|
import {
|
|
|
|
|
Block,
|
|
|
|
|
View,
|
|
|
|
|
Text,
|
|
|
|
|
Image,
|
|
|
|
|
Button,
|
|
|
|
|
ScrollView,
|
|
|
|
|
} from "@tarojs/components";
|
|
|
|
|
|
|
|
|
|
/** 自定义组件 **/
|
|
|
|
|
import Navbar from "../../components/navbar/navbar";
|
|
|
|
|
/** 自定义组件 **/
|
|
|
|
|
|
|
|
|
|
// import { PullToRefresh, IPullToRefreshProps } from "@antmjs/vantui";
|
|
|
|
|
import { Loading } from "@antmjs/vantui";
|
|
|
|
|
import "@antmjs/vantui/es/loading/index.css";
|
|
|
|
|
|
|
|
|
|
import { GetHasBeenRead, GetMessageList } from "../../utils/Interface";
|
|
|
|
|
|
|
|
|
|
import "./message.less";
|
|
|
|
|
|
|
|
|
|
export default class Message extends Component<any, any> {
|
|
|
|
|
constructor(props) {
|
|
|
|
|
super(props);
|
|
|
|
|
@ -19,6 +30,13 @@ export default class Message extends Component<any, any> {
|
|
|
|
|
list: [],
|
|
|
|
|
pageNum: 1,
|
|
|
|
|
pageSize: 10,
|
|
|
|
|
scrollTop: 0,
|
|
|
|
|
// downText: "下拉刷新",
|
|
|
|
|
pullText: "上拉加载更多",
|
|
|
|
|
isBottom: false, // 是否触底
|
|
|
|
|
start_p: {},
|
|
|
|
|
scrollY: true,
|
|
|
|
|
dargState: 0, //刷新状态 0不作操做 1刷新 -1加载更多
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@ -64,40 +82,241 @@ export default class Message extends Component<any, any> {
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// onRefresh: IPullToRefreshProps["onRefresh"] = () => {
|
|
|
|
|
// return new Promise((resolve) => {
|
|
|
|
|
// setTimeout(() => {
|
|
|
|
|
// resolve(undefined);
|
|
|
|
|
// }, 1000);
|
|
|
|
|
// });
|
|
|
|
|
// };
|
|
|
|
|
|
|
|
|
|
// _onscroll = (e) => this.setTop(e.detail.scrollTop);
|
|
|
|
|
|
|
|
|
|
// setTop = (value) => {
|
|
|
|
|
// console.log("setTop", value);
|
|
|
|
|
// };
|
|
|
|
|
|
|
|
|
|
/*** 上拉加载 ***/
|
|
|
|
|
reduction = () => {
|
|
|
|
|
//还原初始设置
|
|
|
|
|
const time = 0.5;
|
|
|
|
|
this.setState({
|
|
|
|
|
// dargState: 0,
|
|
|
|
|
scrollY: true,
|
|
|
|
|
});
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
this.setState({
|
|
|
|
|
pullText: "上拉加载更多",
|
|
|
|
|
// downText: "下拉刷新",
|
|
|
|
|
});
|
|
|
|
|
}, time * 1000);
|
|
|
|
|
};
|
|
|
|
|
touchStart = (e) => {
|
|
|
|
|
this.setState({
|
|
|
|
|
start_p: e.touches[0],
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
touchmove = (e) => {
|
|
|
|
|
let move_p = e.touches[0], //移动时的位置
|
|
|
|
|
deviationX = 0.3, //左右偏移量(超过这个偏移量不执行下拉操做)
|
|
|
|
|
deviationY = 70, //拉动长度（低于这个值的时候不执行）
|
|
|
|
|
maxY = 100; //拉动的最大高度
|
|
|
|
|
|
|
|
|
|
let start_x = this.state.start_p.clientX,
|
|
|
|
|
start_y = this.state.start_p.clientY,
|
|
|
|
|
move_x = move_p.clientX,
|
|
|
|
|
move_y = move_p.clientY;
|
|
|
|
|
|
|
|
|
|
//获得偏移数值
|
|
|
|
|
let dev = Math.abs(move_x - start_x) / Math.abs(move_y - start_y);
|
|
|
|
|
if (dev < deviationX) {
|
|
|
|
|
//当偏移数值大于设置的偏移数值时则不执行操做
|
|
|
|
|
let pY = Math.abs(move_y - start_y) / 3.5; //拖动倍率（使拖动的时候有粘滞的感受--试了不少次 这个倍率恰好）
|
|
|
|
|
if (move_y - start_y > 0) {
|
|
|
|
|
//下拉操做
|
|
|
|
|
if (pY >= deviationY) {
|
|
|
|
|
this.setState({ dargState: 1, downText: "释放刷新" });
|
|
|
|
|
} else {
|
|
|
|
|
// this.setState({ dargState: 0, downText: "下拉刷新" });
|
|
|
|
|
}
|
|
|
|
|
if (pY >= maxY) {
|
|
|
|
|
pY = maxY;
|
|
|
|
|
}
|
|
|
|
|
this.setState({
|
|
|
|
|
scrollY: false, //拖动的时候禁用
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
if (start_y - (move_y + 100) > 0) {
|
|
|
|
|
//上拉操做
|
|
|
|
|
// console.log("上拉操做");
|
|
|
|
|
if (pY >= deviationY) {
|
|
|
|
|
this.setState({ dargState: -1, pullText: "释放加载更多" });
|
|
|
|
|
} else {
|
|
|
|
|
// this.setState({ dargState: 0, pullText: "上拉加载更多" });
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
pull = () => {
|
|
|
|
|
//上拉
|
|
|
|
|
console.log("上拉");
|
|
|
|
|
|
|
|
|
|
// this.props.onPull()
|
|
|
|
|
};
|
|
|
|
|
down = () => {
|
|
|
|
|
//下拉
|
|
|
|
|
console.log("下拉");
|
|
|
|
|
// this.props.onDown()
|
|
|
|
|
};
|
|
|
|
|
ScrollToUpper = () => {
|
|
|
|
|
//滚动到顶部事件
|
|
|
|
|
console.log("滚动到顶部事件");
|
|
|
|
|
// this.props.Upper()
|
|
|
|
|
};
|
|
|
|
|
ScrollToLower = () => {
|
|
|
|
|
//滚动到底部事件
|
|
|
|
|
console.log("滚动到底部事件");
|
|
|
|
|
// this.props.Lower()
|
|
|
|
|
};
|
|
|
|
|
touchEnd = (e) => {
|
|
|
|
|
if (this.state.dargState === 1) {
|
|
|
|
|
this.down();
|
|
|
|
|
} else if (this.state.dargState === -1) {
|
|
|
|
|
this.pull();
|
|
|
|
|
}
|
|
|
|
|
this.reduction();
|
|
|
|
|
};
|
|
|
|
|
/*** 上拉加载 ***/
|
|
|
|
|
|
|
|
|
|
// onPullDownRefresh = (e) => {
|
|
|
|
|
// console.log("onPullDownRefresh", e);
|
|
|
|
|
// };
|
|
|
|
|
|
|
|
|
|
render() {
|
|
|
|
|
let { list } = this.state;
|
|
|
|
|
let { list, scrollTop, dargState, pullText } = this.state;
|
|
|
|
|
return (
|
|
|
|
|
<Block>
|
|
|
|
|
<Navbar isBack={true}></Navbar>
|
|
|
|
|
{/* <View> */}
|
|
|
|
|
{/* <PullToRefresh disable={scrollTop > 0} onRefresh={this.onRefresh}>
|
|
|
|
|
<ScrollView
|
|
|
|
|
onTouchMove={this.touchmove}
|
|
|
|
|
onTouchEnd={this.touchEnd}
|
|
|
|
|
onTouchStart={this.touchStart}
|
|
|
|
|
onScrollToUpper={this.ScrollToUpper}
|
|
|
|
|
onScrollToLower={this.ScrollToLower}
|
|
|
|
|
className="dragUpdata"
|
|
|
|
|
scrollY={this.state.scrollY}
|
|
|
|
|
scrollWithAnimation
|
|
|
|
|
>
|
|
|
|
|
<View style={{ padding: "0 12px" }}>
|
|
|
|
|
{new Array(20).fill(1).map((_, index) => (
|
|
|
|
|
<View
|
|
|
|
|
style={{
|
|
|
|
|
padding: 12,
|
|
|
|
|
background: "#fff",
|
|
|
|
|
marginBottom: 12,
|
|
|
|
|
}}
|
|
|
|
|
key={`PullToRefresh${index}`}
|
|
|
|
|
>
|
|
|
|
|
{index}
|
|
|
|
|
</View>
|
|
|
|
|
))}
|
|
|
|
|
</View>
|
|
|
|
|
</ScrollView>
|
|
|
|
|
</PullToRefresh>
|
|
|
|
|
|
|
|
|
|
<View className="upDragBox">
|
|
|
|
|
{dargState === 0 ? (
|
|
|
|
|
"上拉加载更多"
|
|
|
|
|
) : (
|
|
|
|
|
<Loading size="24px">加载中...</Loading>
|
|
|
|
|
)}
|
|
|
|
|
</View>
|
|
|
|
|
</View> */}
|
|
|
|
|
|
|
|
|
|
<View style="padding-top: 13rpx">
|
|
|
|
|
<ScrollView
|
|
|
|
|
onTouchMove={this.touchmove}
|
|
|
|
|
onTouchEnd={this.touchEnd}
|
|
|
|
|
onTouchStart={this.touchStart}
|
|
|
|
|
onScrollToUpper={this.ScrollToUpper}
|
|
|
|
|
onScrollToLower={this.ScrollToLower}
|
|
|
|
|
className="dragUpdata"
|
|
|
|
|
scrollY={this.state.scrollY}
|
|
|
|
|
scrollWithAnimation
|
|
|
|
|
>
|
|
|
|
|
<View style={{ padding: "0 12px" }}>
|
|
|
|
|
<View className="message">
|
|
|
|
|
{list.map((item: any) => {
|
|
|
|
|
return (
|
|
|
|
|
<View
|
|
|
|
|
className="infobox1"
|
|
|
|
|
onClick={this.godetail}
|
|
|
|
|
key={item.id}
|
|
|
|
|
>
|
|
|
|
|
<View className="info1 flex aitems sb">
|
|
|
|
|
<View className="left flex aitems">
|
|
|
|
|
<View className="icon">
|
|
|
|
|
<Image
|
|
|
|
|
src={require("../../img/logos.png")}
|
|
|
|
|
mode="aspectFill"
|
|
|
|
|
/>
|
|
|
|
|
</View>
|
|
|
|
|
<View className="tip1">系统通知</View>
|
|
|
|
|
</View>
|
|
|
|
|
<View className="right">{item.createTime}</View>
|
|
|
|
|
</View>
|
|
|
|
|
<View className="info2">
|
|
|
|
|
<View className="content">
|
|
|
|
|
<Text>
|
|
|
|
|
[花至官方旗舰店]: {item.content ? item.content : ""}
|
|
|
|
|
</Text>
|
|
|
|
|
</View>
|
|
|
|
|
</View>
|
|
|
|
|
</View>
|
|
|
|
|
);
|
|
|
|
|
})}
|
|
|
|
|
</View>
|
|
|
|
|
</View>
|
|
|
|
|
</ScrollView>
|
|
|
|
|
|
|
|
|
|
<View className="upDragBox">
|
|
|
|
|
{dargState === 0 ? (
|
|
|
|
|
"上拉加载更多"
|
|
|
|
|
) : (
|
|
|
|
|
<Loading size="24px">加载中...</Loading>
|
|
|
|
|
)}
|
|
|
|
|
</View>
|
|
|
|
|
</View>
|
|
|
|
|
{/*
|
|
|
|
|
<View className="message" style="padding-top: 13rpx">
|
|
|
|
|
{list.map((item: any, key: number) => {
|
|
|
|
|
{list.map((item: any) => {
|
|
|
|
|
return (
|
|
|
|
|
<Block>
|
|
|
|
|
<View className="infobox1" onClick={this.godetail} key={key}>
|
|
|
|
|
<View className="info1 flex aitems sb">
|
|
|
|
|
<View className="left flex aitems">
|
|
|
|
|
<View className="icon">
|
|
|
|
|
<Image
|
|
|
|
|
src={require("../../img/logos.png")}
|
|
|
|
|
mode="aspectFill"
|
|
|
|
|
/>
|
|
|
|
|
</View>
|
|
|
|
|
<View className="tip1">系统通知</View>
|
|
|
|
|
<View className="infobox1" onClick={this.godetail} key={item.id}>
|
|
|
|
|
<View className="info1 flex aitems sb">
|
|
|
|
|
<View className="left flex aitems">
|
|
|
|
|
<View className="icon">
|
|
|
|
|
<Image
|
|
|
|
|
src={require("../../img/logos.png")}
|
|
|
|
|
mode="aspectFill"
|
|
|
|
|
/>
|
|
|
|
|
</View>
|
|
|
|
|
<View className="right">{item.createTime}</View>
|
|
|
|
|
<View className="tip1">系统通知</View>
|
|
|
|
|
</View>
|
|
|
|
|
<View className="info2">
|
|
|
|
|
<View className="content">
|
|
|
|
|
<Text>
|
|
|
|
|
[花至官方旗舰店]: {item.content ? item.content : ""}
|
|
|
|
|
</Text>
|
|
|
|
|
</View>
|
|
|
|
|
<View className="right">{item.createTime}</View>
|
|
|
|
|
</View>
|
|
|
|
|
<View className="info2">
|
|
|
|
|
<View className="content">
|
|
|
|
|
<Text>
|
|
|
|
|
[花至官方旗舰店]: {item.content ? item.content : ""}
|
|
|
|
|
</Text>
|
|
|
|
|
</View>
|
|
|
|
|
</View>
|
|
|
|
|
</Block>
|
|
|
|
|
</View>
|
|
|
|
|
);
|
|
|
|
|
})}
|
|
|
|
|
</View>
|
|
|
|
|
</View> */}
|
|
|
|
|
|
|
|
|
|
<View style="height: 100rpx;"></View>
|
|
|
|
|
|
|
|
|
|
|
blak-kong
2 years ago