2020-11-21

简介: 2020-11-21

1. 自适应rpx


使用rpx代替px

iphone6中 2rpx=px


2. flex布局

/* 使用flex布局 */
  display: flex;
  /* row行排列,column垂直排列 */
  flex-direction: column;
  /* 居中 */
  align-items: center;


  • 文本居中方案:

height: 80rpx;
  /* 水平居中,可根据容器的高度设置line-height */
  text-align: center;
  /* 文本行高 */
  line-height: 80rpx;


  • 页面容器元素
  • 比如可以设置比如整个页面的背景

page{
  background-color: #b3d4db;
}


3. 组件


  • 三方组件
  • 安装自定义组件
  1. 小程序根目录执行npm init -> 会生成package.json
  2. 安装npm依赖 npm i lin-ui@0.8.7  -> 会生成node_modules文件夹和相应的依赖的npm包的文件夹和文件
  3. 小程序开发工具-工具-构建npm -> 会生成miniprogram_npm文件夹
  • 使用自定义组件
  • page.json中引入组件

"usingComponents": {
    "lin-avatar":"/miniprogram_npm/lin-ui/avatar/index"
  }
  • lin-avatar可以自定义,自己决定组件的名字


4. 设置小程序入口


  • 在app.json中设置  "entryPagePath": "pages/index/index"
  • 设置完成之后,小程序左上角会出先Home图标,而不是pages[0]
  • home跳转的页面为pages[]数组中的第一项pages[0]


5. 设置宽度100%,高度自适应

<image class="post-image" mode="widthFix" src="{{item.postImage}}"></image>

.post-image {
  width: 100%;
  /* height: 100%; */
  margin-bottom: 10rpx;
}


6. 触底增量添加数据

onReachBottom: function () {
    var that = this;
    // 获取到当前数组
    var curPosts = that.data.posts
    // 向数组中添加元素
    curPosts.push({
      'userAvatar': 'https://img1.doubanio.com/icon/u198088661-69.jpg',
      'userName': 'Ash',
      'postTitle': '有组鹅和我一样喜欢保存各种演出提词器的图片嘛?',
      'postImage': 'https://img2.doubanio.com/view/group_topic/l/public/p363717643.webp',
      'postContent': '最近好忙可能没时间回🙏🙏我手机里有超级超级多,我觉得很多做社交软件背景都特别好看🤧,想开一个楼存放好看的提词器图片,有没有人有好看的提词器图片可以豆油给我存放在这里呀',
      'postLike': '99+',
      'postView': '999+'
    })
    // 重新设置数组值
    that.setData({
      posts: curPosts
    })
  }


# 其他


  • 小程序组件属性设置false: property="{{false}}", 如果是property="false"会被认为是真
相关文章
|
6月前
|
JSON 前端开发 数据可视化
AMIS【部署 01】amis前端低代码框架可视化编辑器amis-editor本地部署流程
AMIS【部署 01】amis前端低代码框架可视化编辑器amis-editor本地部署流程
952 0
|
6月前
|
物联网 Serverless
MQTT常见问题之通过mqtt控制台查询不到设备轨迹如何解决
MQTT(Message Queuing Telemetry Transport)是一个轻量级的、基于发布/订阅模式的消息协议,广泛用于物联网(IoT)中设备间的通信。以下是MQTT使用过程中可能遇到的一些常见问题及其答案的汇总:
|
6月前
|
机器学习/深度学习 并行计算 数据挖掘
Go实现并发与并行,这才是正确打开方式!
Go实现并发与并行,这才是正确打开方式!
76 0
|
JavaScript 前端开发 开发工具
CocosCreator 面试题(五)TS有什么优缺点?为什么要用TS?
CocosCreator 面试题(五)TS有什么优缺点?为什么要用TS?
178 0
|
JavaScript 前端开发
ES5、ES6和ES2015有什么区别?
ES5、ES6和ES2015有什么区别?
310 0
使用shiro路径通配符配置访问权限
使用shiro路径通配符配置访问权限
176 0
|
存储 Cloud Native 大数据
开发者社区连续打卡抽奖活动规则
庆祝“探索云世界”上线,各子社区推出连续打卡抽奖活动
21760 29
|
JSON 中间件 Go
golang gin 框架读取无法用 body 传递的表单参数
golang gin 框架读取无法用 body 传递的表单参数
golang gin 框架读取无法用 body 传递的表单参数
|
JSON 缓存 NoSQL
总结SpringBoot1.x迁移到2.x需要注意的问题
SpringBoot1.x和SpringBoot2.x版本差异化还是比较大的,有些三方依赖组件有些是基于2.0版本为标准升级的,当我们将项目由1.0升级到2.0时会出现依赖的方法不存在或方法错误,需要逐个去调整,下面总结了我们升级实践过程中遇到的一些问题和网友总结的一些问题。
182 0
|
存储 缓存 算法
JVM系列之:你知道为什么要有两个 Survivor吗?关于卡表技术又有多少了解
JVM系列之:你知道为什么要有两个 Survivor吗?关于卡表技术又有多少了解
352 0
JVM系列之:你知道为什么要有两个 Survivor吗?关于卡表技术又有多少了解