当页面配置和全局配置冲突时,优先级最高的就是页面配置。
app.wxss全局样式文件里面定义的选择器,在所有的页面中生效**/
<!-- {{}}是插值表达式,这里面可以直接使用js里面定义的数据 -->
<!-- wx:for指令:用于循环列表,循环出来的每一项通过item返回。么一项对应的索引,通过index返回。循环列表时,添加wx:key的好处是,奖励列表发生变化时重新渲列表的损耗为更低 --
如何判断使用wx:if和hidden
一般来说,wx:if有更高的切换消耗,而hidden有更高的初始渲染消耗。因此,如果需要频繁切换的情境下,用hidden号,如果在运行时条件不大可能改变的时则用wx:if好。
初始渲染消耗:假如说,一共有十个切换按钮,而TA只看前两个,那么这前两个就是初始消耗。(也不知道对不对)
切换消耗:每次切换都要渲染,这就叫渲染消耗,至于为什么只看到了一个,那是因为样式的原因给隐藏了,所以看不见。
跳转页的方法:
<navigator class="addBtn" url="../add/add">+</navigator>
!-- 选择器组件,range-key属性指定选择器中显示内容(从对象身上制定一个属性),range属性制定一个数组(指定一份展示的数据) bindchange="bindPickerChange" ==>选中器改变事件-->
结构赋值使用{}===>花括号
Picker是从底部弹起的滚动选择器
Range-key 是选择内容,也就是按照相对应的属性来进行内容选择
Value表示选中了range中的第几个(从下标开始)
<view class="add">
<view class="item">
<text class="title">标题</text>
<input class="text" model:value="{{title}}" />
</view>
<view class="item">
<text class="title">分类</text>
<picker class="text" bindchange="bindPickerChange" range-key="Name" range="{{sections}}">
<view>
{{sections[sectionsActiveIndex].Name}}
</view>
</picker>
</view>
<view class="item">
<text class="title">答案</text>
<textarea maxlength="-1" class="text" model:value="{{answer}}"></textarea>
</view>
<view class="item">
<text class="title">解析</text>
<textarea maxlength="-1" class="text" model:value="{{desc}}"></textarea>
</view>
<view class="btn" bindtap="addSubject">添加</view>
</view>
bindPickerChange: function (e) {
//获取下标的分类
let index = e.detail.value
//获取对应的分类编号
this.data.section_id = this.data.sections[index].Id
//更新选中的下标
this.setData({
sectionsActiveIndex: index
})
},
其中, sectionsActiveIndex: index里面的冒号可以理解等于号,也就是将数据赋值给了自己定义的一个类似声明的玩意儿。
e.detail.value===>这串代码所代表的就是数据里的下标排序。
this.data.section_id====>这是指ID的顺序,this.data.sections[index].Id这个也是代表着ID的顺序,但其中带的id是指获取和下标匹配的对象。
value-key是:选项对象中,文字对应的key
如何引入Vant数据库
小程序的终端,先创建一个package.js文件(npm init(把它变成一个包,先放一个包的描述文件))(如果文件名是中文,则不能带-y,而且包的文件名不能是大写),然后再在终端输入npm i @vant/weapp -S --production,从而让微信小程序软件支持这个Vant组件的文件,但是小程序并不识别,若要使用,打开小程序右上角的详情按钮,选到本地设置,然后勾选使用npm模块,然后点击左上角的工具按钮,点击里面的npm构建。如果依然不行,则在project.config.js文件里面修改以下两种代码:
"packNpmManually": false,(把false改成true)
"packNpmRelationList": [],(在中括号里面加入:"packageJsonPath": "./package.json", "miniprogramNpmDistDir": "./miniprogram/",这两串代码。)
成功之后接着就是引入Vant文件,在app.json文件里面输入(全局引入(所有的页面都可以用))
"usingComponents": { "van-button": "@vant/weapp/button/index" }
指定页面 在你指定的js文件里面输入"usingComponents": { "van-button": "@vant/weapp/button/index" }