uniapp-接口学习【界面-未(下班前进行重点内容的修改概括)】

https://www.cnblogs.com/xiaotanke/p/7448383.html
回去需要看的

[休息]
题目积累

输入m.n参数,获取一个m长度的都是n的数组,不能用循环。


1-1设置界面标题:【uni.setNavigationBarTitle】

<template>
	<view>
		<form  @submit="setNaivgationBarTitle">
			<view>
				<view>页面标题</view>
				<view>
					<input type="text" name='title' placeholder="请输入页面标题并点击设置即可">
				</view>
				</view>
				
				<view>
					<button type="primary" formType="submit">设置</button>
				</view>
		</form>
	</view>
</template>

<script>
// 	export用于对外输出本模块(一个文件可以理解为一个模块)变量的接口
// import用于在一个模块中加载另一个含有export接口的模块。
	export default {
		data() {
			return {}
		},
		methods: {
			setNaivgationBarTitle:function (e) {
				let title=e.detail.value.title
				// 动态设置当前页面的标题。
				uni.setNavigationBarTitle({
					title:title,
					success:()=>{
						console.log('setNavigationBarTitle success')
					},
					fail:(err)=>{
						console.log('setNavigationBarTitle fail, err is', err)
					}
				})
			}
		}
	}
</script>
 

<style>
	
</style>

1-2【页面调转方式】

			navigateTo() {
				//保留当前页面,跳转到应用内的某个页面
				uni.navigateTo({
					url: 'new-page/new-page?data=Hello'
				})
			},
			navigateBack() {
				//返回到原页面
				uni.navigateBack();
			},
			redirectTo() {
				//关闭当前页面,跳转到应用内的某个页面。
				uni.redirectTo({
					url: 'new-page/new-page'
				});
			},
			switchTab() {
				//跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。
				uni.switchTab({
					url: '/pages/tabBar/template/template'
				});
			},
			reLaunch() {
			//关闭所有页面,打开到应用内的某个页面。【一般用于退出登录页】
				uni.reLaunch({
					url: '/pages/tabBar/component/component'
				});
			}

1-3【下拉刷新–不是很懂】

<template>
	<view>
		<!-- <page-head :title="title"></page-head> -->
		<view>
			<view class="text" v-for="(num,index) in data" :key="index">list-{{num}}</view>
			<view v-if="showLoadMore">{{LoadMoreText}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// title: '下拉刷新+加载更多'
				data:[],
				LoadMoreText:"加载中",
				showLoadMore:false,
				max:0
			}	
		},
		onLoad() {
			this.initData();
		},
		onUnload() {
			this.max=0,
			this.data=[],
			this.LoadMoreText="加载更多",
			this.showLoadMore=false
		},
		onReachBottom() {
			console.log("onReachBottom");
			if(this.max>40){
				this.LoadMoreText="没有更多数据了!"
				return;
			}
			this.showLoadMore=true;
			setTimeout(()=>{
				this.setDate();
			},300);
		},
		onPullDownRefresh() {
			console.log('onPullDownRefresh');
			this.initData();
		},
		methods: {
			initData(){
				setTimeout(()=>{
					this.max=0;
					this.data=[];
					let data=[];
					this.max+=10;
					for(var i=this.max-9;i<this.max+1;i++){
						//push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。
						data.push(i)
					}
// 					concat() 方法用于连接两个或多个数组。
// 该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。
					this.data=this.data.concat(data);
					uni.stopPullDownRefresh();
				},300);
			},
			setDate() {
				let data = [];
				this.max += 10;
				for (var i = this.max - 9; i < this.max + 1; i++) {
					data.push(i)
				}
				this.data = this.data.concat(data);
			}
		}
	}
</script>
 

<style>
	.text {
		margin: 16upx 0;
		width:100%;
		background-color: #fff;
		height: 120upx;
		line-height: 120upx;
		text-align: center;
		color: #555;
		border-radius: 8upx;
		border: 1upx solid;
	}
</style>

1-4【显示操作菜单】

<template>
	<view>
		<view>
			<button  @tap="actionSheetTap">弹出action sheet</button>
		</view>
	</view>
</template>

<script>
	export default{
		data() {
			return{}
		},
		methods: {
			actionSheetTap() {
				uni.showActionSheet({
					itemList:['item1','item2','item3','item4'],
					//success返回参数说明
					// tapIndex	Number	用户点击的按钮,从上到下的顺序,从0开始
					success:(e) =>{
						console.log(e.tapIndex);
						uni.showToast({
							title:"点击了第"+e.tapIndex+"个选项",
							icon:"none"
						})
					}
				})
			}
		}
	}
</script>
 

<style>
	
</style>

1-5【】

猜你喜欢

转载自blog.csdn.net/qq_43239475/article/details/87365997