微信小程序开发学习笔记(7.15)
scroll-view滚动视图的使用
在微信开发者工具中封装好了这个功能。
首先要把几个view标签放入一个盒子,成为行元素。不压缩每一个view使得view溢出界面,这是可以滚动查看。
横向滚动视图
WXML
<scroll-view scroll-x>
<view class="scrout">
<view class="scrbox">111</view>
<view class="scrbox">222</view>
<view class="scrbox">333</view>
<view class="scrbox">444</view>
<view class="scrbox">555</view>
</view>
</scroll-view>
WXSS
.scrout{ border: 1px solid green;display: flex;flex-wrap:nowrap}
.scrbox{width: 100px;height:100px;background:gold;margin-right: 2px;flex:0 0 100px;}
效果
另外还可以调整滚动开始位置,如果是横向滚动使用scroll-left,反之纵向滚动使用 scroll-top
纵向滚动视图
纵向滚动视图:和横向有所差别,横向的视图是height 100%,width 有固定的数值。在纵向滚动视图中就是height有固定的数值限制,width是一个100%。
WXML
<scroll-view class="scroll2" scroll-y scroll-top="150px">
<view class="scrout2">
<view class="scrbox2">111</view>
<view class="scrbox2">222</view>
<view class="scrbox2">333</view>
<view class="scrbox2">444</view>
<view class="scrbox2">555</view>
</view>
</scroll-view>
WXSS
.scroll2{height: 350px;}
.scrbox2{width: 100%; height: 100px;background:pink;margin-bottom: 1px;}
效果
app.josn中的window配置
window用于设置小程序的状态栏、导航条、标题、窗口背景色。
全局配置一个下拉loading为黑色,导航栏背景颜色为灰色,导航栏标题颜色为黑色,可以下拉刷新且背景颜色为黄色的小程序窗口配置
"window":{
"backgroundTextStyle":"dark",
"navigationBarBackgroundColor": "#ddd",
"navigationBarTitleText": "mypage",
"navigationBarTextStyle":"black",
"enablePullDownRefresh": true,
"backgroundColor": "yellow"
},
tabBar
如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。也就是导航栏。在app.josn文件里面和window属于同级文件。
一些参数
效果
页面配置
每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项。文件内容为一个 JSON 对象。
修改demo1的 demo1.json文件
修改导航栏的颜色为#0094aa,页面text为demo-1
代码编辑技巧
1.text标签相对于是web中的span标签,属于行内元素
2.view标签相对于是web中的div标签,属于块级元素 会换行
3.在page.js文件中如果不小心破坏了原有的结构,也不必担心在局部页面中输入page然后选择page的结构,会自动生成结构
数据绑定
先把数据写入page.js 文件中去
字符串类型
数字类型
bool类型
object对象类型
在标签的属性中使用
<view data-num="{{num}}">注意把数据作为标签属性的时候需要在外面加上双引号</view>
使用bool类型充当属性
<view>
<checkbox checked="{{isBattleship}}">
让巴尔是战列舰
</checkbox>
</view>
运算
可以在花括号中加入一些简单的表达式和语句
表达式
1.数字的运算
2.字符串的拼接
3.三目运算符
<view>{{10%2===0 ? '偶数' : '奇数'}}</view>
列表渲染
数组循环
1.wx:for={{数组或对象}}, wx:for-item=“循环项名称” wx:for-index="循环项的索引"
2.wx:key="唯一的值" 用来提高列表渲染的性能
1.如果绑定的一个普通字符串,那么这个字符串的名称就是wx:key
2.如果绑定一个普通的数组就是用 *this 作为wx:key
3.当出现循环嵌套的时候尤其要注意不要出现以下绑定名称重名
wx:for-item=“循环项名称” wx:for-index="循环项的索引"
4.默认情况下不需要写wx:for-item=“循环项名称” wx:for-index="循环项的索引,前提是只有一层循环嵌套的时候,开发者工具会默认循环项名称为 item
WXSS
list:[
{
id:0,
name:'蒙大拿'
},
{
id:1,
name:'让巴尔'
},
{
id:3,
name:'陆奥'
}
]
WXML
<view>
<view
wx:for="{{list}}"
wx:for-item="item"
wx:for-index="index"
wx:key="id">
rank:{{index}}
--
name:{{item.name}}
</view>
</view>
列表循环
1.wx:for={{对象}}, wx:for-item=“对象的值 value” wx:for-index="对象的属性 key"
2.循环对象的时候最好把item和index的名称都修改
wx:for-item="value",wx:for-index="key"
<view>
<view
wx:for="{{person}}"
wx:for-item="value"
wx:for-index="key"
wx:key="age"
>
属性:{{key}}
--
值:{{value}}
</view>
</view>
block标签
block无论什么情况都不会渲染到页面上,因此它不是一个组件。它只会用于处理逻辑
使用场景:如果项目中多个组件是同样的逻辑,那么多个组件最好被block包裹,这样代码的可读性也很高。并且block也可以嵌套block。
原文地址:https://www.cnblogs.com/Eldq/p/13308548.html
- Mysql 高可用 InnoDB Cluster 多节点搭建过程
- 用MapReduce分析Hbase将结果插入mysql中
- 敲敲级简单的鉴别H图片的小程序
- processArgs方法解读
- Python分布式微博爬虫(源码分享)
- NewInstallUserMapper.class阅读笔记
- TimeUtil类所有方法
- mapreduce项目调优
- zookeeper强制关机无法启动Unable to load database on disk具体解决步骤
- Python爬淘宝——300W淘宝文胸说明了什么
- 文本编码转换工具iconv 附批量转换文件编码命令
- 用23行代码爬取豆瓣音乐top250
- GitHub上超9Kstars的Python爬虫项目——pyspider(国人编写)
- 理解zookeeper选举机制
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 使用 Linux seq 命令生成数字序列(推荐)
- CentOS 7上为PHP5安装suPHP的方法(彭哥)
- Linux修改主机名命令详解
- 在CentOS 7.2上安装SuPHP的详细方法
- centos6-7 yum安装php的方法(推荐)
- Linux修改用户所属组的方法
- centos通过yum安装php的教程
- 树莓派4安装Ubuntu 19.10的教程详解
- Linux系统(CentOS7安装)安装JDK8的教程详解
- Deepin中安装与使用virtualenv的教程
- linux安装jdk并设置环境变量的方法教程(看这一篇够了)
- hadoop基于Linux7的安装配置图文详解
- Linux paste命令的使用方法
- ubuntu下迁移home目录至新的分区教程详解
- SVN服务备份操作步骤分享