基于uniapp+u-view开发小程序【技术点整理】
一、上传图片
1.实现效果：
2.具体代码：
<template><view><view class="imgbox"><view>职业证书</view><!-- 上传图片 --><u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="9"></u-upload></view></view>
</template><script>export default {data() {return {hostUrl: this.$api.hostImages, //封装的图片地址fileList1: [], //存放图片的ururl_arr: [],}},methods: {// 删除图片deletePic(event) {this[`fileList${event.name}`].splice(event.index, 1)this.url_arr.splice(event.index, 1)},// 新增图片async afterRead(event) {// console.log(event.name);// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式let lists = [].concat(event.file)let fileListLen = this[`fileList${event.name}`].lengthlists.map((item) => {this[`fileList${event.name}`].push({...item,status: 'uploading',message: '上传中'})})for (let i = 0; i < lists.length; i++) {const result = await this.uploadFilePromise(lists[i].url)let item = this[`fileList${event.name}`][fileListLen]this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {status: 'success',message: '',url: result}))fileListLen++}},uploadFilePromise(url) {var that = thisreturn new Promise((resolve, reject) => {let a = uni.uploadFile({url: that.hostUrl + '/api/upload/upload', //图片接口地址filePath: url,name: 'file',formData: {user: 'test'},success: (res) => {// console.log('图片',res.data)var a = JSON.parse(res.data).initialPreview[0] //对象转数组var imgsUrl = a //数组转字符串that.url_arr.push(imgsUrl)// console.log('图片数组',that.url_arr)setTimeout(() => {resolve(res.data.data)}, 1000)}});})},}}
</script>二、实现省市区的选择
三、下拉框选择
1.实现效果：
2.代码实现：
<!--1.html部分--><view class="item"><view class="item_title"><text>*</text>您的职位</view><picker @change="positionArrayChange" :value="positionIndex" :range="positionArray" range-key="name"><input placeholder="选择" :value="positionArray[positionIndex].name"placeholder-style="font-size:24rpx;color:#999;font-weight: 500;" /></picker><image class="moreimg" :src="localImgSrc('more4@2x.png')"></image></view><!--2.JS部分--><script>export default {data() {return {positionArray: [], //职位数组positionIndex: null, //职位id}},methods: {//职位的接口positionFun() {var that = thisthis.$api.appPlateForm('POST', this.$url.position, '', function(res) {console.log('职位', res)that.positionArray = res.data})},//点击选择职位positionArrayChange: function(e) {console.log('选中的职位', e.detail.value)this.positionIndex = e.detail.value},}}</script>四、自定义单选框
1.实现效果
2.代码实现：
<template><view class="home_content"><view class="itembox"><view class="item" :class="{'item_active':type==1}" @click="addClass(1)"><view><view class="title">个人认证</view><view class="">适用于专业技术人才认证</view></view><view class="right"></view><image :src="localImgSrc('s_xz@2x.png')"></image></view><view class="item" :class="{'item_active':type==2}" @click="addClass(2)"><view><view class="title">企业认证</view><view class="">适用于企业高管 法人资质认证</view></view><view class="right"></view><image :src="localImgSrc('s_xz@2x.png')"></image></view></view></view>
</template><script>export default {data() {return {type: '',}},methods: {// 动态添加classaddClass(index) {this.type = index;console.log(this.type)},nextFun() {//type:1个人认证，2企业认证if (this.type == 1) {uni.navigateTo({url: '/pages/attestation/personalCertification'})} else if (this.type == 2) {uni.navigateTo({url: '/pages/attestation/companyCertification'})} else {uni.showToast({title: '请选择认证类型',icon: 'none'})}},}}
</script><style>page {background-color: RGBA(248, 248, 248, 1);padding-bottom: 100rpx;}.home_content {width: 100%;}.selectbox {width: 100%;display: flex;align-items: center;justify-content: space-between;box-sizing: border-box;padding: 0 30rpx;font-size: 28rpx;font-weight: 400;color: #333333;margin-top: -370rpx;position: relative;margin-bottom: 20rpx;}.selectbox image {width: 242rpx;height: 161rpx;}.selectbox .tit {font-size: 42rpx;font-weight: bold;color: #333333;margin-bottom: 15rpx;}.itembox {width: 100%;box-sizing: border-box;padding: 0 30rpx;position: relative;}.itembox .item {width: 100%;height: 200rpx;background: #FFFFFF;border-radius: 15rpx;margin-bottom: 40rpx;display: flex;align-items: center;justify-content: space-between;box-sizing: border-box;padding: 0 60rpx 0 40rpx;font-size: 26rpx;font-weight: 400;color: #999999;}.itembox .item image {width: 35rpx;height: 35rpx;display: none;}.itembox .item .title {font-size: 32rpx;font-weight: bold;color: #333333;margin-bottom: 30rpx;}.itembox .item .right {width: 35rpx;height: 35rpx;background: #FFFFFF;border: 2rpx solid #999999;border-radius: 50%;}.item_active {border: 3rpx solid #4D9FFE !important;}.item_active image {display: block !important;}.item_active .right {display: none !important;}
</style>五、搜索
5.1 u-view里的搜索组件
1.实现效果：
2.具体代码：
<!--html-->
<view class="topSearch">
<!--这里需要注意一下：如果只使用 search 事件，点击搜索按钮是没有反应的，需要再加一个 custom--><u-search placeholder="搜索关键词..." v-model="keyword" @search="searchHistory" :show-action="true" @custom="searchHistory"></u-search>
</view><!--js-->
<script>export default {data() {return {keyword: '',}},methods: {//搜索接口getSearch() {var that = this;var data = {keyword: that.keyword}this.$api.appPlateForm('POST', this.$url.index_search, data,function(res) {})},//点击搜索searchHistory(value) {console.log('获取到搜索框的内容：',value)this.keyword = valuethis.page = 1this.activityFun()},}}
</script><style>.topSearch {width: 690rpx;height: 70rpx;background: #F4F6F5;border-radius: 35rpx;margin: auto;box-sizing: border-box;padding-right: 20rpx;}/deep/ .u-search__content {height: 70rpx !important;background-color: transparent !important;border-width: 0 !important;}/deep/ .u-search__content input {background-color: transparent !important;}
</style>
5.2 纯手写搜索（包括搜索、搜索记录、热门搜索）
1.实现效果
2.具体代码：
<template><view class="uni_search"><view class="search"><view class="search_box"><input class="search_input" type="text" v-model.trim="keywords" placeholder="搜索关键词..."placeholder-style="font-size: 24rpx;color:#999999;" /></view><view class="search_close" @click="inputFun">搜索</view></view><view class="history" v-if="is_searchcon == 0"><view class="history_top"><view class="history_top_row"><view class="history_title">搜索记录</view><view @click="clearHistory()"><image :src="localImgSrc('icon_delete@2x.png')"></image>清除</view></view></view><view class="history_con"><view class="history_con_li" v-for="(itemH,indexH) in searchHistory" :key='indexH'><view class="" @tap="history_li(itemH)">{{itemH}}</view></view><view class="zanwu" v-if="searchHistory == ''">暂无搜索历史</view></view></view><view class="hot_search"><view class="history_top"><view class="history_title">热门搜索</view></view><view class="history_con"><view class="history_con_li history_con_li_hot" v-for="(item,index) in hotsearch" :key='index'><view class="" @tap="history_li(item.title)"><image class="hotimg" :src="localImgSrc('hot@2x.png')"></image>{{item.title}}</view></view></view></view></view>
</template><script>export default {data() {return {keywords: '', //关键词isSearch: false, //是否搜索hotsearch: [], //热门搜索内容is_searchcon: 0, //是否存在搜索内容 1是0否searchContent: [], //搜索结果内容searchHistory: [] ,//搜索历史}},onLoad() {this.getHotSearch()//在缓存里取到历史数据this.searchHistory = JSON.parse(uni.getStorageSync('searchLocal'));},onShow(){this.is_searchcon = 0},methods: {//点击搜索inputFun() {var that = this;if (that.keywords == '') {uni.showToast({title: '请输入搜索内容',icon: 'none'})that.is_searchcon = 0;} else {that.is_searchcon = 1;uni.navigateTo({url:'/pages/home/searchResult?keywords=' + that.keywords})//搜索历史存入缓存var s = 0; //判断有无重复 0无this.searchHistory.forEach((item, index) => {if (item == this.keywords) {s++this.searchHistory.splice(index, 1);this.searchHistory.unshift(this.keywords)}})if (s == 0) {this.searchHistory.unshift(this.keywords)}//只获取搜索历史的前20个显示uni.setStorageSync('searchLocal', JSON.stringify(this.searchHistory.slice(0, 20)));}},//点击搜索历史里的内容（点击热门搜索里的某一条）history_li(keyword) {var that = this;that.keywords = keyword;//搜索结果接口that.inputFun();},//清空历史搜索clearHistory() {this.searchHistory = []uni.setStorageSync('searchLocal', '');},//热门搜索接口getHotSearch() {var that = this;this.$api.appPlateForm('POST', this.$url.hot_search, '', function(res) {that.hotsearch = res.data})},}}
</script><style>.uni_search {padding: 0 30rpx;box-sizing: border-box;height: 100%;overflow: hidden;}.search {margin-top: 20rpx;margin-bottom: 60rpx;width: 100%;height: 68rpx;display: flex;align-items: center;justify-content: space-between;}.search_box {background-color: #F4F6F5;width: 620rpx;height: 68rpx;border-radius: 68rpx;padding-left: 86rpx;box-sizing: border-box;background-image: url(https://qqh.qqbd.vip/static/index/head/search@2x.png);background-repeat: no-repeat;background-position: 30rpx center;background-size: 36rpx 36rpx;}.search_input {width: 100%;height: 66rpx;line-height: 66rpx;font-size: 24rpx;}.search_close {font-size: 26rpx;}.history {margin-bottom: 60rpx;}.history_top {display: flex;align-items: center;justify-content: space-between;height: 30rpx;margin-bottom: 32rpx;}.history_con {display: flex;flex-wrap: wrap;}.history_con_li {width: auto;height: auto;background: #F6F6F6;border-radius: 30rpx;padding: 18rpx 23rpx;font-size: 24rpx;font-weight: 500;color: #333333;margin-right: 12rpx;margin-bottom: 26rpx;}.history_con_li_hot {display: flex;align-items: center;}.history_con_li_hot image {width: 21rpx;height: 27rpx;margin-left: 8rpx;}.history_top_row{display: flex;align-items: center;justify-content: space-between;width: 100%;font-size: 24rpx;font-weight: 500;color: #999999;}.history_top_row image{width: 30rpx;height: 30rpx;margin-right: 4rpx;}.history_top_row>view{display: flex;align-items: center;}.history_title {font-size: 30rpx;font-weight: bold;color: #333333;}.hotimg{width: 30rpx;height: 30rpx;margin-right: 6rpx;}.history_con_li_hot>view{display: flex;align-items: center;}.zanwu {color: #333333;font-size: 24rpx;text-align: center;width: 100%;}
</style>