标签：uniapp 自定义 index 微信 100% title list height flag

<template>
    <view>
        <topbarcom :title="title"></topbarcom>
        <text @click="abcd">{{name}}</text>


        <view class="date-background" v-show="flag">
            <view class='date-gray-background' @click="hiddeDatePicker">
            </view>

            <view class='date-container'>
                <view class="transparent">
                    <view class='date-confirm'>
                        <view @click="hiddeDatePicker">取消</view>
                        <input v-model="searchValue" placeholder="请输入要搜索的小区名称" />
                        <view @click="confirm">确定</view>
                    </view>
                    <view class="place">
                        <view class="place-item" :class="placeActive==index?'place-active':''"
                            v-for="(item,index) in dataSource" :key="item.id" @tap="placeCheck(index)">
                            {{item.title}}
                        </view>
                    </view>
                    <view class="scrollView">
                        <view class="shequitem" :class="shequActive===index?'shequitemActive':''" v-for="(item,index) in list" :key="item.id"
                            @tap="shequItem(index)">
                            {{item.title}}
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import topbarcom from '@/commen/topbarcom/topbarcom.vue'
    import BASE_URL from '@/config/api.js'
    export default {
        components: {
            topbarcom,
        },
        data() {
            return {
                title: '关于我们',
                searchValue: '',
                flag: false,
                placeActive: 0,
                shequActive: '',
                
                name: '全部社区',
                dataSource: [],
                childArr: [], // 二级分类数据源
                list: [],
                searchList: [],
                listIndex: 0,

            };
        },
        onl oad() {
            this.getAllClassify()
        },
        watch: {
            // 搜索框出现变化
            searchValue(value) {
                if (value !== '') {
                    console.log(123);
                    this.list = this.fuzzyQuery(this.searchList, value)
                } else {
                    console.log('abx');
                    this.list = this.searchList
                }
                // console.log('searchValue改变了', e, this.list);
            }
        },
        methods: {
            // 点击place切换样式
            placeCheck(index) {
                this.searchValue = ''
                this.shequActive=''
                this.placeActive = index
                this.list = [...this.childArr[index]]
                this.searchList = [...this.childArr[index]]
            },
            shequItem(index) {
                this.shequActive = index
                this.name = this.list[index].title
                console.log(this.list[index]);
            },

            // 遍历数组，模糊查询
            fuzzyQuery(list, keyWord) {
                var arr = [];
                for (var i = 0; i < list.length; i++) {
                    if (list[i].title.match(keyWord) != null) {
                        arr.push(list[i]);
                    }
                }
                return arr;
            },
            chaxunjieguo(e) {
                console.log(e);
                for (var i = 0; i < this.list.length; i++) {
                    if (this.list[i].id == e) {
                        return this.name = this.list[i].title
                    }
                }
                // this.name=this.list[e].title
            },
            abcd() {
                this.flag = true
                this.listIndex = 0
            },

            // 获取数据源并分出一级二级
            getAllClassify() {
                uni.request({
                    url: BASE_URL.host + '/area/areaAll',
                    method: 'POST',
                    success: (res) => {
                        console.log(res);
                        this.dataSource = res.data.data
                        let dataLen = this.dataSource.length;
                        for (let i = 0; i < dataLen; i++) {
                            this.childArr.push(this.dataSource[i].children)
                        };
                        this.list = [...this.childArr[0]]
                        this.searchList = [...this.childArr[0]]
                    }
                })
            },
            hiddeDatePicker() {
                this.flag = !this.flag
            },
            showDatePicker() {
                this.flag = !this.flag
                this.getItems()
            },
            confirm(e) {
                console.log("确定", e);
                this.flag = !this.flag
            },

            bindpickend() {},


        }
    }
</script>

<style>
    .date-background {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }

    .date-gray-background {
        position: absolute;
        width: 100%;
        top: 183rpx;
        background: rgba(0, 0, 0, .5);
        height: calc(100% - 500rpx);
    }

    .date-container {
        position: absolute;
        width: 100%;
        height: 800rpx;
        overflow: hidden;
        background: #fff;
        bottom: 0;
        z-index: 1000;
    }

    .date-confirm {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20rpx;
        font-size: 34rpx;
        line-height: 70rpx;
        color: var(--ThemeColor)
    }

    .place {
        display: flex;
        justify-content: space-around;
        height: 100rpx;
        width: 100%;
        line-height: 98rpx;
        font-size: 36rpx;
        color: #070707;

    }

    .place-item {
        width: 120rpx;
        text-align: center;
    }

    .place-active {
        border-bottom: 3rpx solid #000;
    }

    .shequitem {
        width: 100%;
        height: 60rpx;
        margin: 0 auto;
        line-height: 58rpx;
        color: #000;
        border-bottom: 1rpx solid rgb(238, 238, 238);
        text-align: center;
        font-size: 32rpx;
    }

    .shequitemActive {
        background-color: #F6EFDC;
    }
    .searchInput{
        padding: 0 15rpx;
         border: 1rpx solid #707070;
         border-radius: 50rpx;
    }
    .scrollView{
        height: 800rpx;
        width: 100%;
        overflow: scroll;
    }
</style>

标签：uniapp,自定义,index,微信,100%,title,list,height,flag
来源： https://www.cnblogs.com/changshu/p/16473572.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。