全栈开发工程师微信小程序-上(中)-白红宇

全栈开发工程师微信小程序-上(中)

width: 750rpx;复制代码

750rpx代表与屏幕等宽,rpx的缩写responsive pixel,这个单位是可以根据屏幕大小进行自适应调整的像素单位.

小程序规定屏幕的宽度为750.iPhone6的屏幕宽度为375px,共有750个物理像素,750rpx=375px=750物理像素.1rpx=0.5px=1物理像素.

绝对定位

position: absolute;复制代码

相对于父容器进行绝对定位.

tabBar用于设置小程序底部的导航栏. color代表tabBar默认的文本颜色. selectedColor是当前tab被选中的文本颜色. borderStyle是上边框颜色-white和black backgroundColor是tabBar的背景底色. list是tab的集合. pagePath是页面路径. iconPath是默认的常态图标. selectedIconPath是选中时的图标.

`import`与`include`


    
     复制代码

include的引用是将目标文件的代码复制到include标签所在的位置.

concat会将两个或多个数组合并为一个数组.

scroll-view是可滚动视图容器的组件,scroll-y代表竖向滚动,lower-threshold代表距离底部多远.

let app = getApp()复制代码

调用图像预览接口

previewImage(event){ wx.previewImage({  urls: })}复制代码

new Date() 返回当前时间.

getTime() 返回时间的毫秒.

// 下拉{ "enablePullDownRefresh": true}复制代码

`wx:if`条件


    
     {
   {item.text}}
    复制代码

let是块级作用域声明符,var是声明的变量仅在当前代码块中有效.

navigator组件

navigate: 保留当前页面redirect: 关闭当前页面switchTab: 跳转到tabBar页面reLaunch: 关闭所有页面navigateBack: 关闭当前页面复制代码

只有switchTab,reLaunch可以跳转到tabBar页面.要有open-type属性设置.

wx.showModal({ title: "", content: "",})// title提示窗口标题// content提示内容复制代码

view 视图容器。

view是小程序中的万能视图.

hover-class 指定按下去的样式类hover-stop-propagation 指定是否阻止本节点的祖先节点出现点击态hover-start-time 按住后多久出现点击态hover-stay-time 手指松开后点击态保留时间复制代码


      
     
      flex-direction: row
       
         
      
       1
          
      
       2
          
      
       3
        
     
    
      
     
      flex-direction: column
       
         
      
       1
          
      
       2
          
      
       3
        
     
    复制代码

scroll-view 可滚动视图区域。

scroll-x 允许横向滚动 scroll-y 允许纵向滚动upper-threshold 距顶部/左边多远时lower-threshold 距底部/右边多远时scroll-top 设置竖向滚动条位置scroll-left 设置横向滚动条位置bindscrolltoupper 滚动到顶部/左边bindscrolltolower 滚动到底部/右边复制代码


      
     
      vertical scroll
       
         
          
          
          
        
       
         
          
        
     
    
      
     
      horizontal scroll
       
         
          
          
          
        
     
    复制代码

const order = ['red', 'yellow', 'blue', 'green', 'red']Page({  data: {    toView: 'red',    scrollTop: 100  },  upper(e) {    console.log(e)  },  lower(e) {    console.log(e)  },  scroll(e) {    console.log(e)  },  tap(e) {    for (let i = 0; i < order.length; ++i) {      if (order[i] === this.data.toView) {        this.setData({          toView: order[i + 1]        })        break      }    }  },  tapMove(e) {    this.setData({      scrollTop: this.data.scrollTop + 10    })  }})复制代码

监听页面滚动到底部和顶部

bindscrolltoupper = "scrollToSide"bindscrolltolower = "scrollToSide"bindscroll="scroll"scrollToSide(e){ if(e.detail.direction == "top"){  wx.showToast({   title: "",  }) }else if(e.detail.direction == "bottom"){  wx.showToast({   title: "",  }) }}复制代码

swiper 滑块视图容器。

indicator-dots 是否显示面板指示点indicator-color 指示点颜色indicator-active-color 当前选中的指示点颜色autoplay 是否自动切换current 当前所在滑块的 indexinterval 自动切换时间间隔duration 滑动动画时长circular 是否采用衔接滑动vertical 滑动方向是否为纵向复制代码

movable-view 可移动的视图容器，在页面中可以拖拽滑动

direction movable-view的移动方向，属性值有all、vertical、horizontal、noneinertia movable-view是否带有惯性disabled 是否禁用复制代码

cover-view

覆盖在原生组件之上的文本视图

可覆盖的原生组件包括map、video、canvas、camera、live-player、live-pusher，只支持嵌套cover-view、cover-image，可在cover-view中使用button复制代码

cover-image 覆盖在原生组件之上的图片视图

如果看了觉得不错

点赞！转发！

达叔小生：往后余生，唯独有你 You and me, we are family ! 90后帅气小伙，良好的开发习惯；独立思考的能力；主动并且善于沟通简书博客：达叔小生

结语

下面我将继续对其他知识深入讲解，有兴趣可以继续关注

小礼物走一走 or 点赞

绝对定位

import与include

调用图像预览接口

wx:if条件

监听页面滚动到底部和顶部

结语

`import`与`include`

`wx:if`条件