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

我不是女神ヾ 2021-09-17 16:32 346阅读 0赞

![效果][1240]

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

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`条件 ##

`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 手指松开后点击态保留时间

<view class="section">
      <view class="section__title">flex-direction: row</view>
      <view class="flex-wrp" style="flex-direction:row;">
        <view class="flex-item bc_green">1</view>
        <view class="flex-item bc_red">2</view>
        <view class="flex-item bc_blue">3</view>
      </view>
    </view>
    <view class="section">
      <view class="section__title">flex-direction: column</view>
      <view class="flex-wrp" style="height: 300px;flex-direction:column;">
        <view class="flex-item bc_green">1</view>
        <view class="flex-item bc_red">2</view>
        <view class="flex-item bc_blue">3</view>
      </view>
    </view>

![效果][1240 1]

`scroll-view`  
可滚动视图区域。

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

<view class="section">
      <view class="section__title">vertical scroll</view>
      <scroll-view
        scroll-y
        style="height: 200px;"
        bindscrolltoupper="upper"
        bindscrolltolower="lower"
        bindscroll="scroll"
        scroll-into-view="{
       {toView}}"
        scroll-top="{
       {scrollTop}}"
      >
        <view id="green" class="scroll-view-item bc_green"></view>
        <view id="red" class="scroll-view-item bc_red"></view>
        <view id="yellow" class="scroll-view-item bc_yellow"></view>
        <view id="blue" class="scroll-view-item bc_blue"></view>
      </scroll-view>
    
      <view class="btn-area">
        <button size="mini" bindtap="tap">click me to scroll into view</button>
        <button size="mini" bindtap="tapMove">click me to scroll</button>
      </view>
    </view>
    <view class="section section_gap">
      <view class="section__title">horizontal scroll</view>
      <scroll-view class="scroll-view_H" scroll-x style="width: 100%">
        <view id="green" class="scroll-view-item_H bc_green"></view>
        <view id="red" class="scroll-view-item_H bc_red"></view>
        <view id="yellow" class="scroll-view-item_H bc_yellow"></view>
        <view id="blue" class="scroll-view-item_H bc_blue"></view>
      </scroll-view>
    </view>

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
        })
      }
    })

![效果][1240 2]

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

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 当前所在滑块的 index
    interval 自动切换时间间隔
    duration 滑动动画时长
    circular 是否采用衔接滑动
    vertical 滑动方向是否为纵向

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

direction movable-view的移动方向，属性值有all、vertical、horizontal、none
    inertia movable-view是否带有惯性
    disabled 是否禁用

`cover-view`

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

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

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

![效果][1240 3]

如果看了觉得不错

点赞！转发！

> 达叔小生：往后余生，唯独有你  
> You and me, we are family !  
> 90后帅气小伙，良好的开发习惯；独立思考的能力；主动并且善于沟通  
> 简书博客： 达叔小生  
> [https://www.jianshu.com/u/c785ece603d1][https_www.jianshu.com_u_c785ece603d1]

## 结语 ##

*  下面我将继续对 其他知识 深入讲解 ，有兴趣可以继续关注
 *  小礼物走一走 or 点赞

[1240]: /images/20210724/612b53413f914115b16c3a7a19f6d799.png
[1240 1]: /images/20210724/3829bf0e5a9e45e8bad148448ab13b4e.png
[1240 2]: /images/20210724/0bc78c3053fb46cfa865ac8f78b1f77b.png
[1240 3]: /images/20210724/fb3c4be51ad848baa8362ba91fbc7b5d.png
[https_www.jianshu.com_u_c785ece603d1]: https://www.jianshu.com/u/c785ece603d1