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

  • 时间:2019-01-14 22:28 作者:达叔小生 来源:达叔小生 阅读:101
  • 扫一扫,手机访问
摘要:效果全栈开发工程师微信小程序-上(中)width: 750rpx;750rpx代表与屏幕等宽,rpx的缩写responsive pixel,这个单位是可以根据屏幕大小进行自适应调整的像素单位.小程序规定屏幕的宽度为750.iPhone6的屏幕宽度为375px,共有750个物理像素,750rpx=37
效果

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

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是上边框颜色-whiteblack
backgroundColortabBar的背景底色.
listtab的集合.
pagePath是页面路径.
iconPath是默认的常态图标.
selectedIconPath是选中时的图标.

importinclude

<import src="template.wxml">

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

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

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

let app = getApp()

调用图像预览接口

previewImage(event){ wx.previewImage({  urls: })}

new Date() 返回当前时间.

getTime() 返回时间的毫秒.

// 下拉{ "enablePullDownRefresh": true}

wx:if条件

<text wx:if="{{!item.image}}">{{item.text}}</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 手指松开后点击态保留时间
<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>
效果

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

监听页面滚动究竟部和顶部

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后帅气小伙,良好的开发习惯;独立思考的能力;主动并且善于沟通
简书博客: 达叔小生
https://www.songma.com/u/c785ece603d1

结语

  • 下面我将继续对 其余知识 深入讲解 ,有兴趣可以继续关注
  • 小礼物走一走 or 点赞
上一篇 目录 下一篇
  • 全部评论(0)
最新发布的资讯信息
【系统环境|windows】字节跳动前台面试题解析:盛最多水的容器(2021-03-20 21:27)
【系统环境|windows】DevOps敏捷60问,肯定有你想理解的问题(2021-03-20 21:27)
【系统环境|windows】字节跳动最爱考的前台面试题:JavaScript 基础(2021-03-20 21:27)
【系统环境|windows】JavaScript 的 switch 条件语句(2021-03-20 21:27)
【系统环境|windows】解决 XML 数据应用实践(2021-03-20 21:26)
【系统环境|windows】20个编写现代CSS代码的建议(2021-03-20 21:26)
【系统环境|windows】《vue 3.0探险记》- 运行报错:Error:To install them, you can run: npm install --save core-js/modules/es.arra...(2021-03-20 21:24)
【系统环境|windows】浅谈前台可视化编辑器的实现(2021-03-20 21:24)
【系统环境|windows】产品经理入门迁移学习指南(2021-03-20 21:23)
【系统环境|windows】初识webRTC(2021-03-20 21:23)
血鸟云
手机二维码手机访问领取大礼包
返回顶部