更新记录

1.0.6(2020-01-16)

修改点击右边索引会出来“闪屏”的bug,感谢 zhang243249961@qq.com 提供的建议

1.0.5(2019-10-25)

增加新参数“formatName”,需要构建索引参数的名称,无需修改数据格式

查看更多

城市选择插件说明


目录结构

  • components ---组件目录
  • pages --- 页面目录(DEMO)

使用方式

 import citySelect from "@/components/city-select/city-select.vue"
  export default {
    components: {citySelect}
  }

功能介绍

  • formatName --- 需要构建索引参数的名称(注意:传递的对象里面必须要有这个名称的参数)
  • activeCity --- 当前城市
  • hotCity --- 热门城市
  • obtainCitys --- 需要排序的城市数据
  • isSearch --- 是否有搜索功能
  • cityClick --- 点击城市回调方法
   formatName: 'title',
   //当前城市
   activeCity: {
    id: 1,
    title: '南京市'
   },
   //热门城市
   hotCity: [
    {
        id: 0,
        title: '南京市'
    },
    {
        id: 1,
        title: '南京市'
    }
   ],
   //显示的城市数据
   obtainCitys: [
    {
        id: 0,
        title: '南京'
    },
    {
        id: 1,
        title: '北京'
    },
    {
        id: 2,
        title: '天津'
    },
    {
        id: 3,
        title: '东京'
    }
   ]

示例数据

[
    {
        id: 0,
        title: '南京'
    },
    {
        id: 1,
        title: '北京'
    },
    {
        id: 2,
        title: '天津'
    },
    {
        id: 3,
        title: '东京'
    }
]

完整 Demo

<template>
    <view>
        <city-select
            @cityClick="cityClick"
            :formatName="formatName"
            :activeCity="activeCity"
            :hotCity="hotCity"
            :obtainCitys="obtainCitys"
            :isSearch="true"
            ref="citys"
        ></city-select>
    </view>
</template>


import citys from './citys.js'
console.log(citys.length)
import citySelect from '@/components/city-select/city-select.vue'
export default {
    data() {
        return {
            //需要构建索引参数的名称(注意:传递的对象里面必须要有这个名称的参数)
            formatName: 'title',
            //当前城市
            activeCity: {
                id: 1,
                title: '南京市'
            },
            //热门城市
            hotCity: [
                {
                    id: 0,
                    title: '南京市'
                },
                {
                    id: 1,
                    title: '南京市'
                }
            ],
            //显示的城市数据
            obtainCitys: [
                {
                    id: 0,
                    title: '南京'
                },
                {
                    id: 1,
                    title: '北京'
                },
                {
                    id: 2,
                    title: '天津'
                },
                {
                    id: 3,
                    title: '东京'
                }
            ]
        }
    },
    components: {
        citySelect
    },
    onLoad() {
        //动态更新数据
        setTimeout(() => {
            //修改需要构建索引参数的名称
            this.formatName = 'cityName'
            //修改当前城市
            this.activeCity = {
                cityName: '南京',
                cityCode: 110100
            }
            //修改热门城市
            this.hotCity = [
                {
                    cityName: '南京',
                    cityCode: 110100
                },
                {
                    cityName: '北京',
                    cityCode: 110102
                }
            ]
            //修改构建索引数据
            this.obtainCitys = citys
            uni.showToast({
                icon: 'none',
                title: '更新数据成功',
                // #ifdef MP-WEIXIN
                duration: 3000,
                // #endif
                mask: true
            })
        }, 5000)
    },
    methods: {
        cityClick(item) {
            uni.showToast({
                icon: 'none',
                title: 'item: ' + JSON.stringify(item),
                // #ifdef MP-WEIXIN
                duration: 3000,
                // #endif
                mask: true
            })
        }
    }
}


<style></style>

运行方式

将文件解压拖入 HBuilderX ,引入 App.vue、main.js、manifest.json、pages.json 文件,配置好页面路径,运行即可

"pages": [
         {
            "path" : "pages/index/index",
            "style" : {
                "navigationBarTitleText": "index"
            }
        }
    ],

隐私、权限及商业化声明

1. 本插件需要申请的手机端权限列表:

2. 本插件采集的手机端数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问