项目基础：RN ,taro框架，实现H5
1.无限加载的实现
1 import Taro, { Component } from '@tarojs/taro'
2 import { View, Text, ScrollView } from '@tarojs/components'
3 // import { connect } from '@tarojs/redux'
4 // import { add, minus, asyncAdd } from '@/actions/counter'
5 import { AtLoadMore } from "taro-ui"
6 import fetch from '@/api/request.js'
7 import PersonNews from '@/components/PersonNews'
8
9 import styles from './index.module.scss'
10 import '../staticPic/icon.scss'
11
12
13 // 时间戳转换
14 function add0(m){return m<10?'0'+m:m }
15 function timeFormat(timestamp){
16
17 var time = new Date(timestamp);
18 var year = time.getFullYear();
19 var month = time.getMonth()+1;
20 var date = time.getDate();
21 var hours = time.getHours();
22 var minutes = time.getMinutes();
23 var seconds = time.getSeconds();
24 return year+'-'+add0(month)+'-'+add0(date)+' '+add0(hours)+':'+add0(minutes)+':'+add0(seconds);
25 }
26
27 // @connect(state => state.counter, { add, minus, asyncAdd })
28 class NewsInform extends Component {
29
30 config = {
31 navigationBarTitleText: '行家'
32 }
33
34
35 state = {
36 selectTabType: 0, //判断加载的消息类型
37 selectLoadCourse:0, //课程加载结束状态
38 selectLoadPlatfrom:0, //平台加载状态
39 listClass:[], //课程消息
40 listPlatform:[], // 平台消息
41 count: 1, // 课程消息未读总数
42 paltfromCount: 1, // 平台消息未读总数
43 status: 'more',
44 statusCourse: 'more',
45 defaultColor: false,
46 defaultColor2: true,
47 courseAll:1, // 所有的课程消息数目
48 platfromAll:1, // 所有的平台消息数目
49 page:1, // 平台页码
50 pageCourse:1, // 课程页码
51 }
52
53 // 慎用
54 componentWillReceiveProps(nextProps) {
55 console.log(this.props, nextProps)
56 }
57 componentDidShow () { // 每次进入页面就会执行数据的信息
58 console.log('改变消息的状态')
59 if (this.state.selectTabType === 0) {
60 this.msgUnReadCount() //平台未读消息
61 console.log(this.state.listPlatform, '返回的数据之前');
62 Taro.getStorage({ key: '0' }) // 通过key判断是平台的消息，从url获得跳转到消息详情的id然后在消息页面回显
63 .then(res => this.setState({
64 listPlatform:this.state.listPlatform.map(i => { // 遍历之前的数据，通过比较msgId然后改变消息已读的状态，全局的信息是通过taro自己携带Taro.setStorage({ key: type, data: id }) // 设置消息详情的数据到全局
65 if ( i.msgId == res.data) {
66 i.isReaded = 1;
67 }
68 return i;
69 })
70 }))
71 console.log(this.state.listPlatform, '返回的数据之后');
72 } else if (this.state.selectTabType === 1) {
73 this.courseUnReadMsgCount() // 课程消息未读总数
74 Taro.getStorage({ key: '1' })
75 .then(res => this.setState({
76 listClass:this.state.listClass.map(i => {
77 if ( i.msgId == res.data) {
78 i.isReaded = 1;
79 }
80 return i;
81 })
82 }))
83 }
84
85
86
87 }
88 componentDidMount () {
89 this.courseClick() // 课程的数据
90 this.pageClick() // 平台消息的数据
91 this.platnewsClick() //初次渲染平台消息的数据
92 this.courseMsgCount() // 课程消息总数
93 this.courseUnReadMsgCount() // 课程消息未读总数
94 this.msgUnReadCount() //平台未读消息
95 }
96
97 // 请求课程消息的数据
98 courseClick = () => {
99 fetch('getCourseMsg', {
100 SSOTOKEN:Taro.getStorageSync('token'),
101 pageSize:5,
102 page:this.state.pageCourse,
103 }).then((res) => {
104 console.log(res, '课程消息的接口')
105 this.setState({
106 listClass: res,
107 selectLoadCourse:1,
108 pageCourse:this.state.pageCourse+1,
109 })
110 if (res.length <= 5) {
111 this.setState({
112 status:'noMore'
113 })
114 }
115 })
116 }
117
118 // 请求平台消息的数据
119 pageClick() {
120 this.setState({
121 defaultColor: false,
122 defaultColor2: true,
123 })
124 fetch('getplatformMsg', {
125 SSOTOKEN:Taro.getStorageSync('token'),
126 pageSize:5,
127 page:this.state.page,
128 }).then((res) => {
129 console.log(res, '平台消息接口')
130 this.setState({
131 listPlatform: res,
132 selectLoadPlatfrom:1,
133 page:this.state.page+1,
134 })
135 if (res.length <= 5) {
136 this.setState({
137 status:'noMore'
138 })
139 }
140 })
141 }
142
143 // 课程消息点击事件
144 courseNewsClick() {
145 this.setState({
146 defaultColor: true,
147 defaultColor2: false,
148 selectTabType: 1,
149 })
150 }
151 // 平台消息点击事件
152 platnewsClick() {
153 this.setState({
154 selectTabType: 0,
155 defaultColor: false,
156 defaultColor2: true
157 })
158 }
159
160 // 请求课程消息总数
161 courseMsgCount () {
162 fetch('getCourseAllMsg', {
163 SSOTOKEN:Taro.getStorageSync('token'),
164 }).then((res) => {
165 console.log(res, '课程消息总数')
166 this.setState({
167 courseAll:res.count
168 })
169 })
170 }
171
172 // 平台消息总数
173 courseMsgCount () {
174 fetch('getPlatfromAllMsg', {
175 SSOTOKEN:Taro.getStorageSync('token'),
176 }).then((res) => {
177 console.log(res, '平台消息总数')
178 this.setState({
179 platfromAll:res.count
180 })
181 })
182 }
183 // 请求未读消息
184 courseUnReadMsgCount () {
185 fetch('getCourseUnReadMsg', {
186 SSOTOKEN:Taro.getStorageSync('token'),
187 }).then((res) => {
188 console.log(res, '课程未读总数')
189 this.setState({
190 count: res.count,
191 })
192 })
193 }
194 // 平台未读消息
195 msgUnReadCount () {
196 fetch('getMsgUnReadCount', {
197 SSOTOKEN:Taro.getStorageSync('token'),
198 }).then((res) => {
199 console.log(res, '平台未读总数')
200 this.setState({
201 paltfromCount: res.count,
202 })
203 })
204 }
205
206 goDetails(id) { // 跳转
207 console.log(id, 'selectTypeId数据')
208 Taro.navigateTo({
209 url: `/personCenter/pages/personalCenter/newsDetails/index?id=${id}&type=${this.state.selectTabType}`,
210 })
211 }
212
213 goBack() { //回退一级
214 Taro.navigateBack({ delta: 1 })
215 }
216 loadClick = () => {
217 console.log('上拉到底部触发',this.state.platfromAll,this.state.courseAll)
218 // 判断要操作的容器(selectTabType)
219 if (this.state.selectTabType === 0) { // 平台
220 if (this.state.selectLoadPlatfrom === 1) {
221 this.setState({
222 defaultColor: false,
223 defaultColor2: true,
224 status: 'loading' // 平台加载
225 })
226 fetch('getplatformMsg', {
227 SSOTOKEN:Taro.getStorageSync('token'),
228 pageSize:5,
229 page:this.state.page,
230 }).then((res) => {
231 console.log(res, '平台消息接口')
232 if (res.length == 0) {
233 this.setState({
234 status: 'noMore',
235 selectLoadPlatfrom:0
236 })
237 } else {
238 // 有更多数据的时候
239 let moreData = this.state.listPlatform.concat(res);
240 this.setState({
241 listPlatform:moreData,
242 selectLoadPlatfrom:1,
243 page:this.state.page+1,
244 status: 'more'
245 })
246 }
247 })
248 }
249 } else if (this.state.selectTabType === 1) { // 课程
250 console.log('进入课程数据的上啦加载',this.state.selectTabType,'课程加载完之后的数据',this.state.selectLoadCourse)
251 if (this.state.selectLoadCourse === 1) {
252 console.log('课程已经加载完毕',this.state.selectTabType)
253 this.setState({
254 defaultColor: true,
255 defaultColor2: false,
256 statusCourse: 'loading' // 课程加载
257 })
258 fetch('getCourseMsg', {
259 SSOTOKEN:Taro.getStorageSync('token'),
260 pageSize:5,
261 page:this.state.pageCourse,
262 }).then((res) => {
263 console.log(res, '课程消息接口')
264 if (res.length == 0) {
265 console.log('没数据了')
266 this.setState({
267 statusCourse: 'noMore',
268 selectLoadCourse:0
269 })
270 } else {
271 // 有更多数据的时候
272 let moreData = this.state.listClass.concat(res);
273 this.setState({
274 listClass:moreData,
275 selectLoadCourse:1,
276 pageCourse:this.state.pageCourse+1,
277 statusCourse: 'more'
278 })
279 }
280 })
281 }
282 }
283 // 判断是否单次加载完毕
284
285 // 判断是否全部加载完毕
286
287 // 设置为请求状态
288
289 // 请求数据
290
291 // 设置请求状态（单次完成 or 全部加载完毕）
292
293 // 设置数据到对应的容器
294 }
295
296
297
298 render() {
299
300 let styleObj = {
301 color: this.state.defaultColor?'#666':'#ff7847'
302 }
303 let styleObj2 = {
304 color: this.state.defaultColor2?'#666':'#ff7847'
305 }
306
307 let mapListData = []; // 对容器的数据进行筛选
308 if (this.state.selectTabType === 0) {
309 mapListData = this.state.listPlatform.concat([]);
310 } else if (this.state.selectTabType === 1) {
311 mapListData = this.state.listClass.concat([]);
312 }
313
314
315 return (
316
317 <View className={styles.content}>
318 <View className={styles.componentsPage}>
319 <View style={styleObj} className={styles.button} onClick={this.platnewsClick.bind(this)}><Text className='iconfont icon-left' style={{float:'left',paddingLeft:'21px',color:'#666'}} onClick={this.goBack.bind(this)}></Text>
320 平台消息{(this.state.paltfromCount!=0)&&<Text className={styles.number1}>{this.state.paltfromCount}</Text>}</View>
321 <View style={styleObj2} className={styles.button} onClick={this.courseNewsClick.bind(this)}>课程消息{(this.state.count!=0)&&<Text className={styles.number}>{this.state.count}</Text>}</View>
322 </View>
323 <ScrollView
324 scrollY
325 scrollWithAnimation
326 scrollTop='0'
327 style={{height:'667px',marginTop:'44px'}}
328 lowerThreshold='20'
329 upperThreshold='20'
330 onScrollToLower={this.loadClick}
331 hidden={this.state.selectTabType==0?false:true}
332 >
333 {
334 mapListData.map((item,index) => {
335 item.pushTime = timeFormat(item.pushTime);
336 return <PersonNews key={index} isReaded={item.isReaded} title={item.title} describe={item.describe} pushTime={item.pushTime} ongoDetails={()=>this.goDetails(item.msgId)} />
337 })
338 }
339 <AtLoadMore status={this.state.status} noMoreTextStyle={{
340 width: '100%',
341 lineHeight: '10px',
342 textAlign: 'center',
343 fontSize: '12px',
344 color: '#ccc',
345 border: 'none',
346 }} noMoreText='已无更多消息' moreBtnStyle={{
347 width: '100%',
348 lineHeight: '10px',
349 textAlign: 'center',
350 fontSize: '12px',
351 color: '#ccc',
352 border: 'none',
353 }}
354 />
355 </ScrollView>
356
357 <ScrollView
358 scrollY
359 scrollWithAnimation
360 scrollTop='0'
361 style={{height:'667px',marginTop:'44px'}}
362 lowerThreshold='20'
363 upperThreshold='20'
364 onScrollToLower={this.loadClick}
365 hidden={this.state.selectTabType==1?false:true}
366 >
367 {
368 mapListData.map((item,index) => {
369 item.pushTime = timeFormat(item.pushTime);
370 return <PersonNews key={index} isReaded={item.isReaded} title={item.title} describe={item.describe} pushTime={item.pushTime} ongoDetails={()=>this.goDetails(item.msgId)} />
371 })
372 }
373 <AtLoadMore status={this.state.statusCourse} noMoreTextStyle={{
374 width: '100%',
375 lineHeight: '10px',
376 textAlign: 'center',
377 fontSize: '12px',
378 color: '#ccc',
379 border: 'none',
380 }} noMoreText='已无更多消息' moreBtnStyle={{
381 width: '100%',
382 lineHeight: '10px',
383 textAlign: 'center',
384 fontSize: '12px',
385 color: '#ccc',
386 border: 'none',
387 }}
388 />
389 </ScrollView>
390 </View>
391 )
392 }
393 }
394
395 export default NewsInform
// index.module.scss文件是sass形式存在，想不用
className={styles.content}想用className='content'就需要用到：global{}来实现。
2.组件的开发和引入
import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image } from '@tarojs/components'
import styles from './index.module.scss' import spot from './spot.png'
export default class Feed extends Component { render() { return ( <View className={styles.feed} onClick={this.props.onEvent}> <View className={this.props.isItem ? styles.item : styles.item1}> <Text className={styles.text}>{this.props.name}</Text> <Text className={styles.time}>{this.props.time}</Text> <Image src={spot} className={styles.img} /> </View> </View> ) } } *注意onEvent必须是带on，taro框架限制了这一点； 3.数据需要共享的时候用的方法-----看黄色标注文字 *注意文件的层级关系最好同级，不然报错找不到； 4.周末继续补充