所谓案例,直接上代码
标签块:
1 <view class="page"> 2 <!-- 导航栏 --> 3 <free-nav-bar showBack :showRight="false" :backEvent="false" 4 @back="back"> 5 <input type="text" :placeholder="placeholder" v-model="keyword" 6 style=" 650rpx;" class="font-md" @confirm="confirm"/> 7 </free-nav-bar> 8 9 <view v-if="searchType == '' && list.length === 0"> 10 <view class="py-5 flex align-center justify-center"> 11 <text class="font text-light-muted">搜索指定内容</text> 12 </view> 13 14 <view class="px-4 flex flex-wrap"> 15 <view class="flex align-center justify-center mb-3 border-left border-right" style=" 223rpx;" v-for="(item,index) in typeList" :key="index" @click="changeSearchType(item)"> 16 <text class="font text-hover-primary">{{item.name}}</text> 17 </view> 18 </view> 19 </view> 20 21 22 <free-list-item v-for="(item,index) in list" :key="index" 23 :title="item.nickname ? item.nickname : item.username" 24 :cover="item.avatar ? item.avatar : '/static/images/userpic.png'" 25 @click="openUserBase(item.id)"></free-list-item> 26 27 </view>
js板块:
<script> import freeNavBar from "@/components/free-ui/free-nav-bar.vue" import freeListItem from "@/components/free-ui/free-list-item.vue" import $H from "@/common/free-lib/request.js" export default { components: { freeNavBar, freeListItem }, data() { return { typeList:[{ name:"聊天记录", key:"history" },{ name:"用户", key:"user" },{ name:"群聊", key:"group" }], searchType:"", keyword:"", list:[] } }, computed: { placeholder() { let obj = this.typeList.find((item)=>{ return item.key === this.searchType }) if(obj){ return '搜索'+obj.name } return '请输入关键字' } }, methods: { back(){ if(this.searchType == ''){ return uni.navigateBack({ delta: 1 }); } this.searchType = '' }, confirm(){ $H.post('/search/user',{ keyword:this.keyword }).then(res=>{ this.list = [] if(res){ this.list.push(res) } }) }, // 打开用户资料 openUserBase(user_id){ uni.navigateTo({ url: '../../mail/user-base/user-base?user_id='+user_id, }); }, changeSearchType(item){ console.log(item); this.searchType = item.key } } }
样式库都是共公样式:
成果演示