uniapp网络请求/轮播图/scroll-view

系统管理员 2021-09-13 15:54 811阅读 0赞

## 设置尺寸自动转换 ##

HBuilderX - 偏好设置 - 编辑器配置 - px转rpx/upx比例

750设计稿 - 比例750/750 = 1
    350设计稿 - 比例 350/750 = 0.5
    640设计稿 - 比例 640/750 = 0.85
    设置完成后，在代码中写 100px时，会自动提示转换成相应数值

设备rpx换算px：屏幕宽度/750，px换算成rpx:750/屏幕宽度；

iPhone5 1rpx = 0.42px 　　     1px = 2.34px ；
    
    iPhone6 1rpx = 0.5px 　　　　1px = 2rpx ；
    
    iPhone6s 1rpx = 0.552px 　　 1px = 1.81rpx；

## 为什么vue组件的属性，有的需要加冒号“:”，有的不用? ##

加冒号的，说明后面的是一个变量或者表达式；没加冒号的后面就是对应的字符串字面量。

例如：

<my-progress :stroke-width="18"  mycolor="orange"  :text-inside="true" />
    因为mycolor为字符串的字面量   而其他的属性不是number就是bool

## swiper轮播图 ##

*  indicator-dots :是否显示面板指示点
 *  autoplay :是否自动切换
 *  interval :自动切换时间间隔
 *  indicator-color ：指示点颜色
 *  indicator-active-color ：当前选中的指示点颜色
 *  duration ：滑动动画时长
 *  disable-touch ：是否禁止用户 touch 操作

<template>
    	<view>
    	 <swiper indicator-dots="true" autoplay="true" interval="2000">
    		 <swiper-item>
    			 <image src="../../static/logo.png" />
    		 </swiper-item>
    		 <swiper-item>
    		 			 <image src="../../static/logo.png" />
    		 </swiper-item>
    		 <swiper-item>
    		 			 <image src="../../static/logo.png" />
    		 </swiper-item>
    	 </swiper>
    	 <button type="primary" @click="toPath">toText</button>
      </view>
    </template>

## scroll-view（可滚动视图区域） ##

*  scroll-x ：允许横向滚动
 *  scroll-y ：允许纵向滚动
 *  scroll-into-view ：值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素
 *  scroll-with-animation :在设置滚动条位置时使用动画过渡
 *  @scroll ：滚动时触发，event.detail = \{scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY\}
 *  @scrolltolower :滚动到底部/右边，会触发 scrolltolower 事件
 *  scroll-top ：设置竖向滚动条位置
 *  scroll-left ：设置横向滚动条位置
 *  show-scrollbar ：控制是否出现滚动条
 *  refresher-enabled ：开启自定义下拉刷新

**注：三个属性在页面中使用时属性前面应加冒号**  
**1.例子：设置一个简单的左右滑动的模块**  
![在这里插入图片描述][20200310122426237.png]  
![在这里插入图片描述][20200310122519455.png]  
![在这里插入图片描述][20200316220759290.png]  
![在这里插入图片描述][20200316220828873.png]  
效果图如下：  
![在这里插入图片描述][20200316220919602.png]  
**2.运用纵向滑动设置一个类似锚点选择的功能（常用于外卖）**  
注：需要给滑动模块设置高度  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][20200310124901298.png]  
![在这里插入图片描述][20200310125032270.png]  
效果图如下（点击即可触发）：  
![在这里插入图片描述][20200310125201559.png]  
**3.设置左侧列表切换时的背景颜色**  
![在这里插入图片描述][20200310140436739.png]  
![在这里插入图片描述][20200310140618309.png]  
![在这里插入图片描述][20200310140728361.png]  
![在这里插入图片描述][20200310141314288.png]  
**4.uniapp双联动实现**

*  uni.createSelectorQuery()  
    返回一个 SelectorQuery 对象实例。可以在这个实例上使用 select 等方法选择节点，并使用 boundingClientRect 等方法选择需要查询的信息。  
    ![在这里插入图片描述][20200310154037384.png]  
    ![在这里插入图片描述][20200310154113952.png]

onReady() { 
    			this.getNodesInfo();
    		},
    		methods: { 
    				 toPath(){ 
    					 uni.switchTab({ 
    					 	url:"../text/text"
    					 })
    				 },
    				 setId(index){ 
    					 this.clickId="po"+index;
    					 this.currentNum=index;
    				 },
    				 scroll(e){ 
    					 let scrollTop=e.target.scrollTop;
    					 for(let i=0;i<this.topList.length;i++){ 
    						 let h1=this.topList[i];
    						 let h2=this.topList[i+1];
    						 if(scrollTop>=h1&&scrollTop<h2){ 
    							 this.currentNum=i;
    						 }
    					 }
    				 },
    				 scrolltolower(){ 
    					 setTimeout(()=>{ 
    						 this.currentNum=3; //设置滑动到最后一个元素，此处的3表示 
    					 },80); //第四个元素
    				 },
    				 getNodesInfo(){ 
    					 const query = uni.createSelectorQuery().in(this);
    					 query.selectAll('.title').boundingClientRect().exec((res)=>{ 
    						 let nodes=res[0];
    						 let rel=[];
    						 nodes.map(item=>{ 
    							 rel.push(item.top)
    						 })
    						 this.topList=rel;
    					 });
    				 },
    		}

## uni.request（OBJECT） :发起网络请求 ##

**1.OBJECT 参数说明**

url :开发者服务器接口地址（必须填）
    data :请求的参数
    header :设置请求的 header，header 中不能设置 Referer
    method :常用get/post（默认get）
    success :收到开发者服务成功返回的回调函数
    fail :接口调用失败的回调函数
    complete :接口调用结束的回调函数（调用成功、失败都会执行）

**2.method 有效值**

get //适用于各平台
    post //适用于各平台
    put
    delete
    connect
    head
    options
    trace

**3.success 返回参数**

data ：开发者服务器返回的数据
    statusCode ：开发者服务器返回的 HTTP 状态码
    header ：开发者服务器返回的 HTTP Response Header

接口请求示例：

uni.request({ 
        url: 'https://www.example.com/request',
        data: { //参数
            text: 'uni.request'
        },
        header: { 
            'custom-header': 'hello' //自定义请求头信息
        },
        method:'POST'//请求方式 或GET
        success: (res) => { 
            console.log(res.data);
            this.text = 'request success';
        }
    });

**返回值**  
如果希望返回一个 requestTask 对象，需要至少传入 success / fail / complete 参数中的一个  
![在这里插入图片描述][20200311163257197.png]

[20200310122426237.png]: /images/20210913/5b9a2c1e0c6d43ffb2a2c28a4432a59f.png
[20200310122519455.png]: /images/20210913/8cbcea8bf7e34802b2b710b8f2f1aa10.png
[20200316220759290.png]: /images/20210913/78a406f42e0a47669ec86c82ee797e5a.png
[20200316220828873.png]: /images/20210913/acabaafbd373492d89b6652de807c4b5.png
[20200316220919602.png]: /images/20210913/b57d902248b84fdbb827710253dc4f64.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx_size_16_color_FFFFFF_t_70]: /images/20210913/645ec507438545ed960c72f63bf8721d.png
[20200310124901298.png]: /images/20210913/e084fe3ec48d44dc9e790f31a8f1ea6d.png
[20200310125032270.png]: /images/20210913/d836eb60669848fab9383647f70af7e8.png
[20200310125201559.png]: /images/20210913/ce62aec657b2484394e98a284df4f240.png
[20200310140436739.png]: /images/20210913/a30b2b112c614b4aa2f7e6c3fe90abfc.png
[20200310140618309.png]: /images/20210913/17ebc60f1e414cd8a42115908f9b89b8.png
[20200310140728361.png]: /images/20210913/86658d3fd25043fb94c3374bc172b9c4.png
[20200310141314288.png]: /images/20210913/00e9591a1fd14650bccee97f692e9d01.png
[20200310154037384.png]: /images/20210913/02c7a7544d044384b46ac80967f68aad.png
[20200310154113952.png]: /images/20210913/b28c1cfc698e48c084843bfaf20bae61.png
[20200311163257197.png]: /images/20210913/2eabb3543fc441b3ad639bd95c800119.png