小程序常用的知识点3

页面滚动

<scroll-view scroll-y="true" class="scro">
		滚动内容
<scroll-view>

手风琴效果

• accordion="true"是动画是否开启
• v-model=“value” 第一个下拉框内容初始状态为显示
  value: ‘0’,//默认显示主题一的内容

<uni-collapse accordion="true" v-model="value">
	<uni-collapse-item v-for="(item,index) in 4" :key="index"  title="标题内容">
			<text class="text">{{item}}展开/隐藏的内容</text>
	</uni-collapse-item>
</uni-collapse>

左右滑动切换

<!-- 因为swiper特性的关系，请指定swiper的高度 ，swiper的高度并不会被内容撑开-->
		<swiper class="swiper" :indicator-dots="false">
			<swiper-item>
				1
			</swiper-item>
			<swiper-item>
				2
			</swiper-item>
			<swiper-item>
				3
			</swiper-item>
		</swiper>

带标题导航栏的滑动切换页面

<!-- 导航栏 -->
		<view class="navBar">
			<view class="navBarClass" @tap="choiceChange(0)" :class="ChoiceIndex === 0 ? 'navNative':'' ">法规标准</view>
			<view class="navBarClass" @tap="choiceChange(1)" :class="ChoiceIndex === 1 ? 'navNative':'' ">经验分享</view>
			<view class="navBarClass" @tap="choiceChange(2)" :class="ChoiceIndex === 2 ? 'navNative':'' ">课程学习</view>
		</view>
		<!-- 法规标准 -->
		<swiper class="swiper" :indicator-dots="false" @change="swiperChange" :current="currentVal">
			<swiper-item>
				<lawRegulatory v-if="ChoiceIndex === 0"></lawRegulatory>
			</swiper-item>
			<swiper-item>
				<expSharing v-if="ChoiceIndex === 1"></expSharing>
			</swiper-item>
			<swiper-item>
				<couLearing v-if="ChoiceIndex === 2"></couLearing>
			</swiper-item>
		</swiper>

<script>
	import lawRegulatory from 'pages/study/lawRegulatory.vue';
	import expSharing from 'pages/study/expSharing.vue';
	import couLearing from 'pages/study/couLearning.vue';
	export default {
		data() {
			return {
				ChoiceIndex: 0,
				// 控制swiper的显示
				currentVal: 0,
				// 顶部tabs显示状态
				ChoiceIndex: 0,
			}
		},
		components: {
			lawRegulatory,
			expSharing,
			couLearing,
		},
		methods: {
			// 点击顶部tabs触发该函数
			choiceChange(i) {
				this.currentVal = i;
				this.ChoiceIndex = i;
			},
			// swiper切换此函数被监听
			swiperChange(e) {
				this.ChoiceIndex = e.detail.current;
			},
		},
	}
</script>