This is a simple infinite scrolling realization, which used Vue3, Vite, TypeScript, Scss/Sass, Uniapp(DCloud), Normalize.css etc.. Uni stands for Uniapp the frame developed by DCloud.
Several algorithms, multi platform and terminal compatible and performance optimization included, such as handwriting debounce, throttle and so on.
Project views are developed with references to a Chinese app called Xiaohongshu (a.k.a. Red Little Book) interface, whose natural language is based in Mandarin.
Placeholder images are from Placeholder.
这是一个简单的图文无限滚动瀑布流实现,使用技术涉及Vue3, Vite, TypeScript, Scss/Sass, Uniapp, Nomarlize.css等。
包含一部分算法、多平台多终端兼容以及性能优化内容,如手写的节流与防抖等。
项目语言为中文,参考了小红书的界面。
占位图来自Placeholder。
These two preview pages are ran in real iPhone 12 Pro Safari (Address bar hidden) and Google Chrome (F12 Mobile Mode).
预览画面来自于iPhone 12 Pro Safari真机画面(隐藏地址栏)以及Google Chrome(F12开发者工具移动端模式)。
-
If the node environment is still unloaded, please run
npm install
in powershell first.如果无Node环境,请先在终端运行
npm install
。 -
Use
dev:h5
oruni
to run in development mode (dev:h5:net
oruni --host
for both local and network server).使用
dev:h5
或uni
在开发模式下运行 (使用dev:h5:net
或uni --host
可同时开启本地服务器与网络服务器)。 -
Use
build:h5
oruni build
to pack through Vite to production environment (Server or virtual server like Live Server needed).使用
build:h5
或uni build
通过Vite打包到生产环境。(需要服务器环境) -
Due to the features of Uniapp(DCloud) Frame, this project can be packed to various platforms within considerable compatibility (NOT 100% FULLY). You can look up the
package.json
file to see platforms supported. This is fully developed for H5 page initially.因为Uniapp框架的特性,这个项目可以打包到多个平台并保持较好的兼容性(但不是100%兼容)。您可以通过查看项目文件
package.json
来获取支持打包的平台。项目初衷是开发H5页面。