app.json
pages : 小程序页面路径, 可用来新增页面, 或调整页面顺序
{{week}} , {{date}}中{{week}}/{{date}},一个组件的数据属性,被Vue
自动渲染$ {week} ${weekday}模板字符插入语法,替换为变量实际的值
mode="aspectFit" || mode="aspectFill"将图片缩放至合适容器的大小
maybe aspectFill更完整显示图片?
flex-wrap: wrap; 换行显示,均匀分布
justify-content: space-around; 子项之间有均匀的间隔
position: fixed;固定,即使滚动界面位置保持不变
border-radius: 50%;圆角边框
border-radius: 10px;圆角
height: 100vh;占据整个的屏幕
overflow: hidden;裁剪溢出边框的部分
在最大的容器里设置 width : 100%还是很有必要的...
垂直居中:
display: flex; 设置为flex容器
flex-direction: column;
align-items: center;
按钮或者导航链接,文本与按钮(图片)上下存在一定空间,左右紧贴按钮边缘
padding: 10px 0;(第一个值用于上下,第二个值用于左右)
margin-top: 10px;(段落,标题,列表项之间隔一定间距)
伪元素:
在使用伪元素时,祖先元素添加position: relative;其实很有必要,伪元素::after使用
position: absolute;.绝对定位(absolute)的元素是相对于最近的relative进行定位
::after {
content: "";/伪元素的必要属性/
position: absolute;
bottom: 0;/*底部边缘与 posiion : relative 的元素对齐 */
left: 38%; /* 下划线的起始位置 */
width: 20%; /* 下划线的长度 */
height: 2px;/*伪元素高度 2px ,实则是下划线高度 */
background-color: #ff8c00;
}
handleTabClick : function(e){
const tabName = e.currentTarget.dataset.tab; /* e.currentTarget触发事件元素 */
/* 从dataset对象中读取tab属性值 ,对应的html中 data-tab*/
this.setData({
currentTab : tabName
});
}
<view class="content" wx:if="{{currentTab === 'today'}}">只有,当if = true时,view标签内的内容
才会显示
<view class="list" wx:for="{{notices}}" wx:key="id">循环渲染列表,wx:key = "id"很有必要
尤其是,数据复杂变化时
for循环用到的单个元素为item
<swiper class="my-swiper" indicator-dots="{{true}}">indicator-dots为指示点
在swiper容器内使用多个swiper-item定义单个容器内容,swiper-item可包含image,text等
元素,以此创建轮播效果
