前端开发之从零开始的uniapp(2):编写uni-app的第一个页面

一、我们在刚创建的app项目中打开他的pages文件下的index文件下的index.vue，里面有些写好的代码，打开的展示效果如上一篇文章所示，但我们开发是不需要这些的，可以删掉也可以直接代码重写，在这里我选择重写 

二、介绍一下我们的index.vue文件的结构

1.其中<template>我的理解就是类似html中<boby>的地方，不同的是它使用<div>标签，这里用的是<view>，这里就不多介绍了

2.<script>标签按我的理解就是放置数据的地方，还有点击方法或者键盘输入方法的封装，以及页面的生命周期等等

3.<style>标签就是我们放置样式的地方，可以用css，less，scss等等

4.我认为<template>标签就好比人的骨骼，<style>标签就好比人的皮肉，<script>标签就是人的动作和行为，三者构建出了一个有骨有肉且活生生的人

tips：以下代码为index的代码，这里选择全部删掉

三、删除了index.vue的内容之后我们开始编写，我所使用的是scroll-view的横向滑动，具体实现可参考官网，代码如下：

<template>

	<view class="all">
		<view class="cart">
			<view class="cart-top">
				<view>卡种选择</view><view>更多服务</view>
			</view>   
			    <!-- 横向滚动 -->
	<scroll-view class="scroll2" scroll-x >
		<view :class="id==index?'block-cart':''"
		 v-for="(item,index) in list"
		:key="index" @click="clk(index)"
		 class="scroll_item"
		 >
			<view class="smallcart">
			{{item.smallcart}}
		</view>
			<view>0元开通</view>
				<view class="balck">省多少付多少</view>
				<view class="font">卡费封顶￥99</view>
		</view>
	</scroll-view>
	    <view class="cart-bottom" @click="togoods">点击查看更多联名卡</view>
		</view>
	 </view>

<script>

data() {
			return {
				id:0,
		list:[
			{id:1,smallcart:"年卡*先享后付",balck:"省多少付多少",font:"卡费封顶￥99"},
			{id:2,smallcart:"年卡*先享后付",balck:"省多少付多少",font:"卡费封顶￥99"},
			{id:3,smallcart:"年卡*先享后付",balck:"省多少付多少",font:"卡费封顶￥99"},
			{id:4,smallcart:"年卡*先享后付",balck:"省多少付多少",font:"卡费封顶￥99"}
		]
			}
		},
		onLoad() {

		},
		methods: {
        clk(index){
			this.id=index
			console.log(this.id)
		}
		}

<style>

.all{
	background-color: #f1f1f1;
	width: 100%;
	height: 1000rpx;
}
.cart{
	border-radius: 30rpx;
	margin: 0rpx 20rpx;
	padding-top: 20rpx;
	height: 340rpx;
	background-color: #fcfcfc;
}
.balck{
	margin: 0 auto;
}
.cartback{
	text-align: center;
	background-color: #ffffff;
	border-radius: 30rpx;
	width: 230rpx;
	height: 180rpx;
}
.cart-top{
	margin: 5rpx 10rpx;
	display: flex;
	justify-content: space-between;
}
.scrolltop{
	background-color: #e5e5e5;
	height: 200rpx;
}
.scrollcart{
	display: inline-block;
	white-space: nowrap;
	width: 100%;
	height: 200rpx;
}
.scroll2 {
  height: 200rpx;
  white-space: nowrap;
}
.scroll_item {
  margin: 5rpx 5rpx;
  display: inline-block;
  border:2px solid #efefef;
  text-align: center;
  background-color: #ffffff;
  border-radius: 30rpx;
  width: 230rpx;
  height: 180rpx;
  }
.balck{
	color: coral;
	background-color: black;
	width: 200rpx;
	border-radius: 30rpx;
	text-align: center;
}
.cart-bottom{
	text-align: center;
	margin: 25rpx 0rpx;
	width: 100%;
	line-height: 60rpx;
	background-color: #e5d931;
	height: 60rpx;
	border-radius: 20rpx;
}
.block-cart{
	
	border:2px solid #8b8b00;
	text-align: center;
	background-color: #e5d931;
	border-radius: 30rpx;
	width: 230rpx;
	height: 180rpx;
}

具体实现效果