uni-app学习心得体会

     uni-app是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

     在学习uniapp的过程中，我试着以node.js作为后端，开发了一个网上商城app。这个app底部Tabber有着四个功能页面：首页，分类，购物车，我的。

1.首页代码和实现效果

<template>
	<view class="shou">
		<scroll-view scroll-x="true" class="scroll-content" :scroll-into-view="scrollIndex">
			<view :id="'top'+index" class="scroll-item" v-for="(item,index) in topBar" :key="index"
				@tap='changeTab(index)'>
				<text :class="topBarIndex===index? 'f-active-color':'f-color'">{
  {item.name}}</text>
			</view>
		</scroll-view>

		<swiper @change="onChangeTab" :current="topBarIndex" :style="'height:'+clientHeight+'px;'">
			<swiper-item v-for="(item,index) in newTopBar" :key="index">

				<scroll-view scroll-y="true" :style="'height:'+clientHeight+'px;'" @scrolltolower='loadMore(index)'>
					<block v-if='item.data.length>0'>
						<block v-for="(k,i) in item.data" :key="i">

							<!-- //推荐 -->
							<swiperVue v-if="k.type=='swiperVue'" :dataList="k.data"></swiperVue>
							<template v-if="k.type=='recommendVue'">
								<recommendVue :dataList="k.data"></recommendVue>
								<cardVue cardTitle="猜你喜欢"></cardVue>
							</template>

							<!-- //其他 -->
							<Banner v-if="k.type=='Banner'" :dataList="k.imgUrl"></Banner>
							<template v-if="k.type=='Icons'">
								<Icons :dataList="k.data"></Icons>
								<cardVue cardTitle="热销爆品"></cardVue>
							</template>
							<template v-if="k.type=='Hot'">
								<Hot :dataList="k.data"></Hot>
								<cardVue cardTitle="为你推荐"></cardVue>
							</template>

							<commodityVue v-if="k.type=='commodityVue'" :dataList="k.data"></commodityVue>
						</block>
					</block>
					<view v-else>
						暂无数据...
					</view>
					<view class='load-text f-color'>
						{
  {item.loadText}}
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
<Tabbar cureentPage='HomePage'></Tabbar>
	</view>
</template>

<script>
	import recommendVue from '../../colorui/components/recommend.vue';
	import swiperVue from '../../colorui/components/swiper.vue';
	import cardVue from '../../colorui/components/Card.vue';
	import commodityVue from '../../colorui/components/CommodityList.vue';
	import Banner from '../../colorui/components/Banner.vue';
	import Icons from '../../colorui/components/Icons.vue';
	import Hot from '../../colorui/components/Hot.vue';
	import $http from '@/common/api/request.js';
	import Tabbar from '@/colorui/components/Tabbar.vue'
	export default {
		data() {
			return {
				//索引
				topBarIndex: 0,
				//顶栏滑动
				scrollIndex: 'top0',
				//内容块高度
				clientHeight: 0,
				//顶栏数据
				topBar: [],
				//承载数据
				newTopBar: []
			}
		},
		components: {
			swiperVue,
			recommendVue,
			cardVue,
			commodityVue,
			Banner,
			Icons,
			Hot,
			Tabbar
		},
		onLoad() {
			this.__init();
		},
		onReady() {
			uni.getSystemInfo({
				success: (res) => {
					this.clientHeight = res.windowHeight - this.getClientHeight();
				}
			})
		},
		onNavigationBarButtonTap(e) {
			if (e.float == 'left') {
				uni.navigateTo({
					url: "../search/search"
				})
			}
		},
		methods: {
			//请求首页数据10.92.12.23，192.168.2.213，localhost
			__init() {
				$http.request({
					url: "/index_list/data"
				}).then((res) => {
					this.topBar = res.topBar;
					this.newTopBar = this.initData(res);
				}).catch(() => {
					uni.showToast({
						title: '请求失败',
						icon: 'none'
					})
				})
			},
			//添加数据
			initData(res) {
				let arr = [];
				for (let i = 0; i < this.topBar.length; i++) {
					let obj = {
						data: [],
						load: "first",
						loadText: "上拉加载更多..."
					}
					//获取首次数据
					if (i == 0) {
						obj.data = res.data;
					}
					arr.push(obj)
				}
				return arr;
			},
			// goDetailPage(e) {
			// 	if (typeof e === 'string') {
			// 		uni.navigateTo({
			// 			url: '/pages/tabBar/' + e + '/' + e
			// 		});
			// 	} else {
			// 		uni.navigateTo({
			// 			url: e.url
			// 		});
			// 	}
			// },
			//点击顶栏
			changeTab(index) {
				if (this.topBarIndex === index) {
					return;
				}
				this.topBarIndex = index;
				this.scrollIndex = 'top&