Vant组件库

1. 下载Vant Weapp

步骤一：通过 npm 安装

npm i @vant/weapp -S --production

步骤二：修改 app.json

将 app.json 中的 "style": "v2" 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。

步骤三：修改 project.config.json

开发者工具创建的项目，miniprogramRoot 默认为 miniprogram，package.json 在其外部，npm 构建无法正常工作。

需要手动在 project.config.json 内添加如下配置，使开发者工具可以正确索引到 npm 依赖的位置。

"setting": {

"packNpmManually": true,

"packNpmRelationList": [

{ "packageJsonPath": "./package.json",

"miniprogramNpmDistDir": "./miniprogram/" } ]

}

注意：由于目前新版开发者工具创建的小程序目录文件结构问题，npm构建的文件目录为miniprogram_npm，并且开发工具会默认在当前目录下创建miniprogram_npm的文件名，所以新版本的miniprogramNpmDistDir配置为'./'即可。

步骤四：构建 npm 包

点击工具-->构建npm

并勾选本地设置-->使用npm模块选项

在.json文件中配置使用的组件，可以在全局中配置，也可以在单独页面中配置。

"usingComponents": { "van-field": "@vant/weapp/field/index", "van-picker": "@vant/weapp/picker/index", "van-popup": "@vant/weapp/popup/index", "van-button": "@vant/weapp/button/index", "van-divider": "@vant/weapp/divider/index", "van-empty": "@vant/weapp/empty/index", "van-search": "@vant/weapp/search/index" }

2. 列表页添加搜索功能

<wxs src="../../wxs/filter.wxs" module="filter" />

<view class="container">

<van-search model:value="{{ title }}" placeholder="请输入搜索关键词" bind:search="onSearch" bind:clear="onClear" />

<navigator url="../vantdetails/vantdetails?id={{item.Id}}" class="data" wx:for="{{dataList}}" wx:key="index">

<view class="title">{{item.Title}} </view>

<view class="flex j-s a-c desc">

<view>{{item.Section.Name}}</view>

<view>{{filter.formatTime(item.Createtime)}}</view>

</view> </navigator> </view>

<view bindtap="click" class="btn_add">+</view>

//搜索框的搜索方法 onSearch(){

this.data.pageIndex = 1 //页码重新设置为1

this.getDataList() //调用获取数据的方法

},

//搜索框的清空方法

onClear(){

//清空title

this.setData({

title:''

})

this.data.pagesIndex = 1 //页码重新设置为1

this.getDataList() //调用获取数据的方法

}

3. 重构添加页面

<view class="content">

<view class="item">

<van-field label="题目" title-width="80rpx"

model:value="{{ title }}"

placeholder="请输入题目" required />

</view>

<view class="item">

<van-field label="答案" title-width="80rpx" type="textarea" autosize custom-style="height:150rpx"

model:value="{{ answer }}"

placeholder="请输入答案" required />

</view>

<view class="item">

<van-field label="分类" title-width="80rpx" readonly

model:value="{{ section_name }}"

placeholder="请选择分类" bindtap="showPopup" required />

</view>

<view class="item">

<van-field label="解析" title-width="80rpx" type="textarea" autosize custom-style="height:150rpx"

model:value="{{ desc }}"

placeholder="请输入答案" />

</view>

<view class="item flex j-c">

<van-button loading="{{loading}}" loading-text="添加中..." type="primary" block round icon="plus" bindtap="click">添加题目</van-button>

</view>

</view>

<van-popup position="bottom" show="{{ show }}" bind:close="onClose">

<van-picker

show-toolbar

title="请选择分类" value-key="Name"

columns="{{ typeList }}"

bind:cancel="onClose"

bind:confirm="onConfirm"

/>

</van-popup>

//获取分类信息的方法

async getTypeList(){

let typeList = await wx.$get('/Section/GetSections')

this.setData({

typeList

})

},

//显示弹出层方法

showPopup() {

this.setData({ show: true });

},

//关闭弹出层方法

onClose() {

this.setData({ show: false });

},

//选择器确定方法

onConfirm(event) {

const { value } = event.detail;

//设置分类编号和分类名称

this.setData({

section_id:value.Id,

section_name:value.Name,

show:false

})

},

//添加按钮点击事件

async click(){

//非空验证

if(!this.data.title || !this.data.section_id || !this.data.answer)

return wx.$msg('请输入完整信息！')

//请求后台，添加题目信息

this.setData({

loading:true

})

let res = await wx.$post('/Subject/AddSubject',{

title:this.data.title,

answer:this.data.answer,

desc:this.data.desc,

section_id:this.data.section_id

})

if(res){

wx.$msg('添加成功！')

this.setData({

loading:false

})

this.clear() //清空数据

}

},

//清空方法

clear(){

this.setData({

title:'',

answer:'',

desc:'',

section_id:0,

section_name:''

})

}

4. 重构详情页

<view class="content" wx:if="{{data}}">

<view class="title">{{data.Title}}</view>

<van-divider fontSize="15" contentPosition="left" textColor="#248067" borderColor="#248067">答案</van-divider>

<view class="answer">{{data.Answer}}</view> <van-divider fontSize="15" contentPosition="left" textColor="#248067" borderColor="#248067">解析</van-divider>

<view class="desc">{{data.Desc}}</view>

</view>

<van-empty wx:else description="暂无数据" />

onLoad: function (options) {

if(Object.keys(options).length>0){ this.data.id = options.id

}

//调用获取数据的方法

this.getData()

},

//获取数据的方法

async getData(){

//根据题目的id，获取题目信息

let data = await wx.$get('/Subject/GetSubject',{id:this.data.id})

this.setData({ data })

},

onPullDownRefresh: function () {

//重新获取详情信息

//调用获取数据的方法

this.getData()

//1秒后关闭下拉刷新

setTimeout(() => { wx.stopPullDownRefresh()

}, 1000); }