移动端开发案例【6】移动端群、用户搜索开发

所谓案例，直接上代码

标签块：

<view class="page">
        <!-- 导航栏 -->
        <free-nav-bar showBack :showRight="false" :backEvent="false"
        @back="back">
            <input type="text" :placeholder="placeholder" v-model="keyword"
            style="width: 650rpx;" class="font-md" @confirm="confirm"/>
        </free-nav-bar>
        
        <view v-if="searchType == '' && list.length === 0">
            <view class="py-5 flex align-center justify-center">
                <text class="font text-light-muted">搜索指定内容</text>
            </view>
            
            <view class="px-4 flex flex-wrap">
                <view class="flex align-center justify-center mb-3 border-left border-right" style="width: 223rpx;" v-for="(item,index) in typeList" :key="index" @click="changeSearchType(item)">
                    <text class="font text-hover-primary">{{item.name}}</text>
                </view>
            </view>
        </view>
        
        
        <free-list-item v-for="(item,index) in list" :key="index" 
        :title="item.nickname ? item.nickname : item.username"
        :cover="item.avatar ? item.avatar : '/static/images/userpic.png'"
        @click="openUserBase(item.id)"></free-list-item>
        
    </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
            }
        }
    }

样式库都是共公样式：

 

成果演示