H5專案總結

專案基礎：rn ,taro框架，實現h5

1.無限載入的實現

1 import taro,  from '@tarojs/taro'

2 import from '@tarojs/components'3//
import from '@tarojs/redux'4//
import from '@/actions/counter'
5 import from "taro-ui"
6 import fetch from '@/api/request.js'
7 import personnews from '@/components/personnews'
89 import styles from './index.module.scss'
10 import '../staticpic/icon.scss'
1112
13//
時間戳轉換
14function add0(m)
15function
timeformat(timestamp)
2627
//@connect(state => state.counter, )
28class newsinform extends component 
3334
35 state =
5253
//慎用
54componentwillreceiveprops(nextprops) 
57componentdidshow () ) // 通過key判斷是平台的訊息，從url獲得跳轉到訊息詳情的id然後在訊息頁面回顯
63 .then(res => this
.setstate() // 設定訊息詳情的資料到全域性
65if ( i.msgid ==res.data) 
68return
i;69
})70
}))71 console.log(this.state.listplatform, '返回的資料之後');
72 } else
if (this.state.selecttabtype === 1) )
75 .then(res => this
.setstate(
80return
i;81
})82
})) 83}
8485
8687}88
componentdidmount () 
9697
//請求課程訊息的資料
98 courseclick = () =>).then((res) =>)
110if (res.length <= 5) )
114}
115})
116}
117118
//請求平台訊息的資料
119pageclick() )
124 fetch('getplatformmsg', ).then((res) =>)
135if (res.length <= 5) )
139}
140})
141}
142143
//課程訊息點選事件
144coursenewsclick() )
150}
151//
平台訊息點選事件
152platnewsclick() )
158}
159160
//請求課程訊息總數
161coursemsgcount () ).then((res) =>)
169})
170}
171172
//平台訊息總數
173coursemsgcount () ).then((res) =>)
181})
182}
183//
請求未讀訊息
184courseunreadmsgcount () ).then((res) =>)
192})
193}
194//
平台未讀訊息
195msgunreadcount () ).then((res) =>)
203})
204}
205206 godetails(id) &type=$`,
210}) 
211}
212213 goback() )
215}
216 loadclick = () =>)
226 fetch('getplatformmsg', ).then((res) =>)
237 } else
)246
}247
})248
}249 } else
if (this.state.selecttabtype === 1) )
258 fetch('getcoursemsg', ).then((res) =>)
270 } else
)279
}280
})281
} 282
}283
//判斷是否單次載入完畢
284285
//判斷是否全部載入完畢
286287
//設定為請求狀態
288289
//請求資料
290291
//設定請求狀態（單次完成 or 全部載入完畢）
292293
//設定資料到對應的容器
294}
295296
297298
render() 
303 let styleobj2 =
306307 let maplistdata = ; //
對容器的資料進行篩選
308if (this.state.selecttabtype === 0) else
if (this.state.selecttabtype === 1) 
313314
315return
(316
317318
319this.platnewsclick.bind(this)}>float:'left',paddingleft:'21px',color:'#666'}} onclick=>
320 平台訊息}
321this.coursenewsclick.bind(this)}>課程訊息}
322323
324scrolly
325scrollwithanimation
326 scrolltop='0'
327 style=}
328 lowerthreshold='20'
329 upperthreshold='20'
330 onscrolltolower=
331 hidden=
332 >
333 />
337})
338}
339this.state.status} nomoretextstyle=} nomoretext='已無更多訊息' morebtnstyle=}
354 />
355356
357358scrolly
359scrollwithanimation
360 scrolltop='0'
361 style=}
362 lowerthreshold='20'
363 upperthreshold='20'
364 onscrolltolower=
365 hidden=
366 >
367 />
371})
372}
373this.state.statuscourse} nomoretextstyle=} nomoretext='已無更多訊息' morebtnstyle=}
388 />
389390
391)
392}
393}
394395 export default newsinform
// index.module.scss檔案是sass形式存在，想不用

classname=想用classname='content'就需要用到：global{}來實現。

2.元件的開發和引入

import from '@tarojs/components'

import styles from './index.module.scss'

import spot from './spot.png'

export default class feed extends component )}

}*注意onevent必須是帶on，taro框架限制了這一點；

3.資料需要共享的時候用的方法-----看黃色標註文字

*注意檔案的層級關係最好同級，不然報錯找不到；

4.週末繼續補充

鏈家H5專案總結

在此次專案中，使用的是高度百分比。對於適配這一塊確實少了很多。1 如果是用高度百分比的話。則img需要寫成這樣的樣式。img 如果需要居中的話，可以對外層的div設定乙個類名class 比如是setwidth,然後通過js去獲取第一張的寬度賦給這個外層的div.setwidth function 不...

前端H5專案問題總結

一 img 併排放置時，會出現空白間隙 解決方法 1 將轉換為塊級物件 img 2 設定的垂直對齊方式 img 3 改變父物件的屬性 overflow hidden 4 取消標籤和其父物件的最後乙個結束標籤之間的空格 二 二級列表頁面 1 樣式最好一致，方便後台 迴圈上傳 三 手機端 fixed 失...

vue中h5專案怎麼使用weui

注 專案使用vue cli腳手架，最新版腳手架建立專案參考這裡 安裝weui js檔案和css檔案 cnpm i weui.js weui s在main.js中新增如下 import weui from weui.js import weui vue.prototype.weui weui具體可以檢...