使用uView快速开发

<template>
	<view>

		<view class="wrap">
			<u-swiper :list="list"></u-swiper>
		</view>
		<view>
			<u-notice-bar mode="horizontal" :list="noticelist"></u-notice-bar>
		</view>
		<view>
			<u-grid :col="4" :border="false">
				<u-grid-item>
					<u-icon name="photo" :size="46"></u-icon>
					<view class="grid-text">图片</view>
				</u-grid-item>
				<u-grid-item>
					<u-icon name="lock" :size="46"></u-icon>
					<view class="grid-text">锁头</view>
				</u-grid-item>
				<u-grid-item>
					<u-icon name="hourglass" :size="46"></u-icon>
					<view class="grid-text">沙漏</view>
				</u-grid-item>
				<u-grid-item>
					<u-icon name="star-fill" :size="46"></u-icon>
					<view class="grid-text">收藏</view>
				</u-grid-item>
			</u-grid>
		</view>
		<view>
			<u-search class="px20" shape="square" :animation="true" placeholder="日照香炉生紫烟" v-model="keyword"></u-search>
		</view>
		<view class="wrap"  >
			<view class="item u-border-bottom" v-for="(item, index) in LoadList" :key="index">
				<u-read-more>
						<rich-text :nodes="content"></rich-text>
					</u-read-more>
			</view>
			<u-loadmore :status="status" />
			<u-back-top :scrollTop="scrollTop" :mode="mode" :icon-style="iconStyle"></u-back-top>
		</view>
		 
	</view>
</template>

<script>
	export default {
		data() {
			return {
				status: 'loadmore',
				content: `山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。
								苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。
								无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？`,
				LoadList: 3,
				page: 0,
				scrollTop: 0,
				mode: 'circle',
				iconStyle: {
					fontSize: '32rpx',
					color: '#1bbf80'
				},
				keyword: '遥看瀑布挂前川',
				noticelist: [
					'寒雨连江夜入吴',
					'平明送客楚山孤',
					'洛阳亲友如相问',
					'一片冰心在玉壶'
				],
				list: [{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}
				],
			}
		},
		onReachBottom() {
					if(this.page >= 3) return ;
					this.status = 'loading';
					this.page = ++ this.page;
					setTimeout(() => {
						this.LoadList += 1;
						if(this.page >= 30) this.status = 'nomore';
						else this.status = 'loading';
					}, 2000)
				},
		methods: {
			onPageScroll(e) {
				this.scrollTop = e.scrollTop;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		padding: 40rpx;
	}

	.grid-text {
		font-size: 28rpx;
		margin-top: 4rpx;
		color: $u-type-info;
	}

	.px20 {
		padding: 20px;
	}
</style>

效果图：