Commit 05caf119 authored by wlxuqu's avatar wlxuqu

初始化项目

parents
/unpackage/dist/*
/node_modules/*
/.idea/*
<script>
export default {
// 此处globalData为了演示其作用,不是uView框架的一部分
globalData: {
username: '白居易'
},
onLaunch() {
// 1.1.0版本之前关于http拦截器代码,已平滑移动到/common/http.interceptor.js中
// 注意,需要在/main.js中实例化Vue之后引入如下(详见文档说明):
// import httpInterceptor from '@/common/http.interceptor.js'
// Vue.use(httpInterceptor, app)
},
}
</script>
<style lang="scss">
@import "uview-ui/index.scss";
/*每个页面公共css */
/* H5的时候,隐藏滚动条 */
/* #ifdef H5 */
::-webkit-scrollbar {
display: none;
width: 0 !important;
height: 0 !important;
-webkit-appearance: none;
background: transparent;
}
/* #endif */
</style>
MIT License
Copyright (c) 2020 www.uviewui.com
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
\ No newline at end of file
export default[
{
"name": "女装",
"foods": [
{
"name": "A字裙",
"key": "A字裙",
"icon": "http://img.kiwifruits.cn/classify/1/1.jpg",
"cat": 10
},
{
"name": "T恤",
"key": "T恤",
"icon": "http://img.kiwifruits.cn/classify/1/2.jpg",
"cat": 10
},
{
"name": "半身裙",
"key": "半身裙",
"icon": "http://img.kiwifruits.cn/classify/1/3.jpg",
"cat": 10
},
{
"name": "衬衫",
"key": "衬衫",
"icon": "http://img.kiwifruits.cn/classify/1/4.jpg",
"cat": 10
},
{
"name": "短裙",
"key": "短裙",
"icon": "http://img.kiwifruits.cn/classify/1/5.jpg",
"cat": 10
},
{
"name": "阔腿裤",
"key": "阔腿裤",
"icon": "http://img.kiwifruits.cn/classify/1/6.jpg",
"cat": 10
},
{
"name": "连衣裙",
"key": "连衣裙",
"icon": "http://img.kiwifruits.cn/classify/1/7.jpg",
"cat": 10
},
{
"name": "妈妈装",
"key": "妈妈装",
"icon": "http://img.kiwifruits.cn/classify/1/8.jpg",
"cat": 10
},
{
"name": "牛仔裤",
"key": "牛仔裤",
"icon": "http://img.kiwifruits.cn/classify/1/9.jpg",
"cat": 10
},
{
"name": "情侣装",
"key": "情侣装",
"icon": "http://img.kiwifruits.cn/classify/1/10.jpg",
"cat": 10
},
{
"name": "休闲裤",
"key": "休闲裤",
"icon": "http://img.kiwifruits.cn/classify/1/11.jpg",
"cat": 10
},
{
"name": "雪纺衫",
"key": "雪纺衫",
"icon": "http://img.kiwifruits.cn/classify/1/12.jpg",
"cat": 10
},
{
"name": "防晒衣",
"key": "防晒衣",
"icon": "http://img.kiwifruits.cn/classify/1/13.jpg",
"cat": 10
},
{
"name": "礼服/婚纱",
"key": "礼服婚纱",
"icon": "http://img.kiwifruits.cn/classify/1/14.jpg",
"cat": 10
}
]
},
{
"name": "美食",
"foods": [
{
"name": "火锅",
"key": "火锅",
"icon": "http://img.kiwifruits.cn/classify/2/1.jpg",
"cat": 6
},
{
"name": "糕点饼干",
"key": "糕点饼干",
"icon": "http://img.kiwifruits.cn/classify/2/2.jpg",
"cat": 6
},
{
"name": "坚果果干",
"key": "坚果果干",
"icon": "http://img.kiwifruits.cn/classify/2/3.jpg",
"cat": 6
},
{
"name": "酒类",
"key": "酒类",
"icon": "http://img.kiwifruits.cn/classify/2/4.jpg",
"cat": 6
},
{
"name": "辣条",
"key": "辣条",
"icon": "http://img.kiwifruits.cn/classify/2/5.jpg",
"cat": 6
},
{
"name": "大礼包",
"key": "大礼包",
"icon": "http://img.kiwifruits.cn/classify/2/6.jpg",
"cat": 6
},
{
"name": "精品茗茶",
"key": "",
"icon": "http://img.kiwifruits.cn/classify/2/7.jpg",
"cat": 6
},
{
"name": "休闲食品",
"key": "休闲食品",
"icon": "http://img.kiwifruits.cn/classify/2/8.jpg",
"cat": 6
},
{
"name": "糖果巧克力",
"key": "糖果巧克力",
"icon": "http://img.kiwifruits.cn/classify/2/9.jpg",
"cat": 6
},
{
"name": "方便速食",
"key": "方便速食",
"icon": "http://img.kiwifruits.cn/classify/2/10.jpg",
"cat": 6
},
{
"name": "营养代餐",
"key": "营养代餐",
"icon": "http://img.kiwifruits.cn/classify/2/11.jpg",
"cat": 6
},
{
"name": "粮油副食",
"key": "粮油",
"icon": "http://img.kiwifruits.cn/classify/2/12.jpg",
"cat": 6
},
{
"name": "生鲜水果",
"key": "水果",
"icon": "http://img.kiwifruits.cn/classify/2/13.jpg",
"cat": 6
},
{
"name": "饮品",
"key": "饮品",
"icon": "http://img.kiwifruits.cn/classify/2/14.jpg",
"cat": 6
}
]
},
{
"name": "美妆",
"foods": [
{
"name": "化妆刷",
"key": "化妆刷",
"icon": "http://img.kiwifruits.cn/classify/3/1.jpg",
"cat": 3
},
{
"name": "粉底",
"key": "粉底",
"icon": "http://img.kiwifruits.cn/classify/3/2.jpg",
"cat": 3
},
{
"name": "洗发护发",
"key": "洗发护发",
"icon": "http://img.kiwifruits.cn/classify/3/3.jpg",
"cat": 3
},
{
"name": "美容工具",
"key": "美容工具",
"icon": "http://img.kiwifruits.cn/classify/3/4.jpg",
"cat": 3
},
{
"name": "眼部护理",
"key": "眼部护理",
"icon": "http://img.kiwifruits.cn/classify/3/5.jpg",
"cat": 3
},
{
"name": "眉妆",
"key": "眉妆",
"icon": "http://img.kiwifruits.cn/classify/3/6.jpg",
"cat": 3
},
{
"name": "卸妆品",
"key": "卸妆品",
"icon": "http://img.kiwifruits.cn/classify/3/7.jpg",
"cat": 3
},
{
"name": "基础护肤",
"key": "基础护肤",
"icon": "http://img.kiwifruits.cn/classify/3/8.jpg",
"cat": 3
},
{
"name": "眼妆",
"key": "眼妆",
"icon": "http://img.kiwifruits.cn/classify/3/9.jpg",
"cat": 3
},
{
"name": "唇妆",
"key": "唇妆",
"icon": "http://img.kiwifruits.cn/classify/3/10.jpg",
"cat": 3
},
{
"name": "面膜",
"key": "面膜",
"icon": "http://img.kiwifruits.cn/classify/3/11.jpg",
"cat": 3
},
{
"name": "沐浴用品",
"key": "沐浴用品",
"icon": "http://img.kiwifruits.cn/classify/3/12.jpg",
"cat": 3
},
{
"name": "护肤套装",
"key": "护肤套装",
"icon": "http://img.kiwifruits.cn/classify/3/13.jpg",
"cat": 3
},
{
"name": "防晒品",
"key": "防晒品",
"icon": "http://img.kiwifruits.cn/classify/3/14.jpg",
"cat": 3
},
{
"name": "美甲",
"key": "美甲",
"icon": "http://img.kiwifruits.cn/classify/3/15.jpg",
"cat": 3
}
]
},
{
"name": "居家日用",
"foods": [
{
"name": "垃圾袋",
"key": "垃圾袋",
"icon": "http://img.kiwifruits.cn/classify/4/1.jpg",
"cat": 4
},
{
"name": "纸巾",
"key": "纸巾",
"icon": "http://img.kiwifruits.cn/classify/4/2.jpg",
"cat": 4
},
{
"name": "驱蚊用品",
"key": "驱蚊用品",
"icon": "http://img.kiwifruits.cn/classify/4/3.jpg",
"cat": 4
},
{
"name": "收纳神器",
"key": "收纳神器",
"icon": "http://img.kiwifruits.cn/classify/4/4.jpg",
"cat": 4
},
{
"name": "厨房用品",
"key": "厨房用品",
"icon": "http://img.kiwifruits.cn/classify/4/5.jpg",
"cat": 4
},
{
"name": "厨房烹饪",
"key": "烹饪",
"icon": "http://img.kiwifruits.cn/classify/4/6.jpg",
"cat": 4
},
{
"name": "衣物晾晒",
"key": "衣物晾晒",
"icon": "http://img.kiwifruits.cn/classify/4/7.jpg",
"cat": 4
},
{
"name": "衣物护理",
"key": "衣物护理",
"icon": "http://img.kiwifruits.cn/classify/4/8.jpg",
"cat": 4
},
{
"name": "宠物用品",
"key": "宠物用品",
"icon": "http://img.kiwifruits.cn/classify/4/9.jpg",
"cat": 4
},
{
"name": "医药保健",
"key": "医药",
"icon": "http://img.kiwifruits.cn/classify/4/10.jpg",
"cat": 4
},
{
"name": "日用百货",
"key": "百货",
"icon": "http://img.kiwifruits.cn/classify/4/11.jpg",
"cat": 4
},
{
"name": "清洁用品",
"key": "清洁",
"icon": "http://img.kiwifruits.cn/classify/4/12.jpg",
"cat": 4
},
{
"name": "绿植园艺",
"key": "绿植",
"icon": "http://img.kiwifruits.cn/classify/4/13.jpg",
"cat": 4
}
]
},
{
"name": "男装",
"foods": [
{
"name": "爸爸装",
"key": "爸爸装",
"icon": "http://img.kiwifruits.cn/classify/5/1.jpg",
"cat": 12
},
{
"name": "牛仔裤",
"key": "牛仔裤",
"icon": "http://img.kiwifruits.cn/classify/5/2.jpg",
"cat": 12
},
{
"name": "衬衫",
"key": "衬衫",
"icon": "http://img.kiwifruits.cn/classify/5/3.jpg",
"cat": 12
},
{
"name": "休闲裤",
"key": "休闲裤",
"icon": "http://img.kiwifruits.cn/classify/5/4.jpg",
"cat": 12
},
{
"name": "外套",
"key": "外套",
"icon": "http://img.kiwifruits.cn/classify/5/5.jpg",
"cat": 12
},
{
"name": "T恤",
"key": "T恤",
"icon": "http://img.kiwifruits.cn/classify/5/6.jpg",
"cat": 12
},
{
"name": "套装",
"key": "套装",
"icon": "http://img.kiwifruits.cn/classify/5/7.jpg",
"cat": 12
},
{
"name": "运动裤",
"key": "运动裤",
"icon": "http://img.kiwifruits.cn/classify/5/8.jpg",
"cat": 12
},
{
"name": "马甲/背心",
"key": "马甲背心",
"icon": "http://img.kiwifruits.cn/classify/5/9.jpg",
"cat": 12
},
{
"name": "POLO衫",
"key": "POLO衫",
"icon": "http://img.kiwifruits.cn/classify/5/10.jpg",
"cat": 12
},
{
"name": "商务装",
"key": "商务装",
"icon": "http://img.kiwifruits.cn/classify/5/11.jpg",
"cat": 12
}
]
},
{
"name": "鞋品",
"foods": [
{
"name": "单鞋",
"key": "单鞋",
"icon": "http://img.kiwifruits.cn/classify/6/1.jpg",
"cat": 5
},
{
"name": "皮鞋",
"key": "皮鞋",
"icon": "http://img.kiwifruits.cn/classify/6/2.jpg",
"cat": 5
},
{
"name": "帆布鞋",
"key": "帆布鞋",
"icon": "http://img.kiwifruits.cn/classify/6/3.jpg",
"cat": 5
},
{
"name": "北京老布鞋",
"key": "北京老布鞋",
"icon": "http://img.kiwifruits.cn/classify/6/4.jpg",
"cat": 5
},
{
"name": "运动鞋",
"key": "运动鞋",
"icon": "http://img.kiwifruits.cn/classify/6/5.jpg",
"cat": 5
},
{
"name": "拖鞋",
"key": "拖鞋",
"icon": "http://img.kiwifruits.cn/classify/6/6.jpg",
"cat": 5
},
{
"name": "凉鞋",
"key": "凉鞋",
"icon": "http://img.kiwifruits.cn/classify/6/7.jpg",
"cat": 5
},
{
"name": "休闲鞋",
"key": "休闲鞋",
"icon": "http://img.kiwifruits.cn/classify/6/8.jpg",
"cat": 5
},
{
"name": "高跟鞋",
"key": "高跟鞋",
"icon": "http://img.kiwifruits.cn/classify/6/9.jpg",
"cat": 5
},
{
"name": "老人鞋",
"key": "老人鞋",
"icon": "http://img.kiwifruits.cn/classify/6/10.jpg",
"cat": 5
},
{
"name": "懒人鞋",
"key": "懒人鞋",
"icon": "http://img.kiwifruits.cn/classify/6/11.jpg",
"cat": 5
}
]
},
{
"name": "数码家电",
"foods": [
{
"name": "数据线",
"key": "数据线",
"icon": "http://img.kiwifruits.cn/classify/7/1.jpg",
"cat": 8
},
{
"name": "耳机",
"key": "耳机",
"icon": "http://img.kiwifruits.cn/classify/7/2.jpg",
"cat": 8
},
{
"name": "生活家电",
"key": "家电",
"icon": "http://img.kiwifruits.cn/classify/7/3.jpg",
"cat": 8
},
{
"name": "电风扇",
"key": "电风扇",
"icon": "http://img.kiwifruits.cn/classify/7/4.jpg",
"cat": 8
},
{
"name": "电吹风",
"key": "电吹风",
"icon": "http://img.kiwifruits.cn/classify/7/5.jpg",
"cat": 8
},
{
"name": "手机壳",
"key": "手机壳",
"icon": "http://img.kiwifruits.cn/classify/7/6.jpg",
"cat": 8
},
{
"name": "榨汁机",
"key": "榨汁机",
"icon": "http://img.kiwifruits.cn/classify/7/7.jpg",
"cat": 8
},
{
"name": "小家电",
"key": "小家电",
"icon": "http://img.kiwifruits.cn/classify/7/8.jpg",
"cat": 8
},
{
"name": "数码电子",
"key": "数码",
"icon": "http://img.kiwifruits.cn/classify/7/9.jpg",
"cat": 8
},
{
"name": "电饭锅",
"key": "电饭锅",
"icon": "http://img.kiwifruits.cn/classify/7/10.jpg",
"cat": 8
},
{
"name": "手机支架",
"key": "手机支架",
"icon": "http://img.kiwifruits.cn/classify/7/11.jpg",
"cat": 8
},
{
"name": "剃须刀",
"key": "剃须刀",
"icon": "http://img.kiwifruits.cn/classify/7/12.jpg",
"cat": 8
},
{
"name": "充电宝",
"key": "充电宝",
"icon": "http://img.kiwifruits.cn/classify/7/13.jpg",
"cat": 8
},
{
"name": "手机配件",
"key": "手机配件",
"icon": "http://img.kiwifruits.cn/classify/7/14.jpg",
"cat": 8
}
]
},
{
"name": "母婴",
"foods": [
{
"name": "婴童服饰",
"key": "衣服",
"icon": "http://img.kiwifruits.cn/classify/8/1.jpg",
"cat": 2
},
{
"name": "玩具乐器",
"key": "玩具乐器",
"icon": "http://img.kiwifruits.cn/classify/8/2.jpg",
"cat": 2
},
{
"name": "尿不湿",
"key": "尿不湿",
"icon": "http://img.kiwifruits.cn/classify/8/3.jpg",
"cat": 2
},
{
"name": "安抚牙胶",
"key": "安抚牙胶",
"icon": "http://img.kiwifruits.cn/classify/8/4.jpg",
"cat": 2
},
{
"name": "奶瓶奶嘴",
"key": "奶瓶奶嘴",
"icon": "http://img.kiwifruits.cn/classify/8/5.jpg",
"cat": 2
},
{
"name": "孕妈用品",
"key": "孕妈用品",
"icon": "http://img.kiwifruits.cn/classify/8/6.jpg",
"cat": 2
},
{
"name": "宝宝用品",
"key": "宝宝用品",
"icon": "http://img.kiwifruits.cn/classify/8/7.jpg",
"cat": 2
},
{
"name": "婴童湿巾",
"key": "湿巾",
"icon": "http://img.kiwifruits.cn/classify/8/8.jpg",
"cat": 2
},
{
"name": "喂养洗护",
"key": "洗护",
"icon": "http://img.kiwifruits.cn/classify/8/9.jpg",
"cat": 2
},
{
"name": "婴童鞋靴",
"key": "童鞋",
"icon": "http://img.kiwifruits.cn/classify/8/10.jpg",
"cat": 2
},
{
"name": "口水巾",
"key": "口水巾",
"icon": "http://img.kiwifruits.cn/classify/8/11.jpg",
"cat": 2
},
{
"name": "营养辅食",
"key": "营养",
"icon": "http://img.kiwifruits.cn/classify/8/12.jpg",
"cat": 2
},
{
"name": "婴幼书籍",
"key": "书籍",
"icon": "http://img.kiwifruits.cn/classify/8/13.jpg",
"cat": 2
},
{
"name": "婴儿车",
"key": "婴儿车",
"icon": "http://img.kiwifruits.cn/classify/8/14.jpg",
"cat": 2
}
]
},
{
"name": "箱包",
"foods": [
{
"name": "单肩包",
"key": "单肩包",
"icon": "http://img.kiwifruits.cn/classify/9/1.jpg",
"cat": 0
},
{
"name": "斜挎包",
"key": "斜挎包",
"icon": "http://img.kiwifruits.cn/classify/9/2.jpg",
"cat": 0
},
{
"name": "女包",
"key": "女包",
"icon": "http://img.kiwifruits.cn/classify/9/3.jpg",
"cat": 0
},
{
"name": "男包",
"key": "男包",
"icon": "http://img.kiwifruits.cn/classify/9/4.jpg",
"cat": 0
},
{
"name": "双肩包",
"key": "双肩包",
"icon": "http://img.kiwifruits.cn/classify/9/5.jpg",
"cat": 0
},
{
"name": "小方包",
"key": "小方包",
"icon": "http://img.kiwifruits.cn/classify/9/6.jpg",
"cat": 0
},
{
"name": "钱包",
"key": "钱包",
"icon": "http://img.kiwifruits.cn/classify/9/7.jpg",
"cat": 0
},
{
"name": "旅行箱包",
"key": "旅行箱包",
"icon": "http://img.kiwifruits.cn/classify/9/8.jpg",
"cat": 0
},
{
"name": "零钱包",
"key": "零钱包",
"icon": "http://img.kiwifruits.cn/classify/9/9.jpg",
"cat": 0
},
{
"name": "手提包",
"key": "手提包",
"icon": "http://img.kiwifruits.cn/classify/9/10.jpg",
"cat": 0
},
{
"name": "胸包",
"key": "胸包",
"icon": "http://img.kiwifruits.cn/classify/9/11.jpg",
"cat": 0
}
]
},
{
"name": "内衣",
"foods": [
{
"name": "袜子",
"key": "袜子",
"icon": "http://img.kiwifruits.cn/classify/10/1.jpg",
"cat": 11
},
{
"name": "吊带背心",
"key": "吊带背心",
"icon": "http://img.kiwifruits.cn/classify/10/2.jpg",
"cat": 11
},
{
"name": "抹胸",
"key": "抹胸",
"icon": "http://img.kiwifruits.cn/classify/10/3.jpg",
"cat": 11
},
{
"name": "内裤",
"key": "内裤",
"icon": "http://img.kiwifruits.cn/classify/10/4.jpg",
"cat": 11
},
{
"name": "文胸",
"key": "文胸",
"icon": "http://img.kiwifruits.cn/classify/10/5.jpg",
"cat": 11
},
{
"name": "文胸套装",
"key": "文胸套装",
"icon": "http://img.kiwifruits.cn/classify/10/6.jpg",
"cat": 11
},
{
"name": "打底塑身",
"key": "打底塑身",
"icon": "http://img.kiwifruits.cn/classify/10/7.jpg",
"cat": 11
},
{
"name": "家居服",
"key": "家居服",
"icon": "http://img.kiwifruits.cn/classify/10/8.jpg",
"cat": 11
},
{
"name": "船袜",
"key": "船袜",
"icon": "http://img.kiwifruits.cn/classify/10/9.jpg",
"cat": 11
},
{
"name": "情侣睡衣",
"key": "情侣睡衣",
"icon": "http://img.kiwifruits.cn/classify/10/10.jpg",
"cat": 11
},
{
"name": "丝袜",
"key": "丝袜",
"icon": "http://img.kiwifruits.cn/classify/10/11.jpg",
"cat": 11
}
]
},
{
"name": "文娱车品",
"foods": [
{
"name": "车市车品",
"key": "车市车品",
"icon": "http://img.kiwifruits.cn/classify/11/1.jpg",
"cat": 7
},
{
"name": "办公文具",
"key": "办公文具",
"icon": "http://img.kiwifruits.cn/classify/11/2.jpg",
"cat": 7
},
{
"name": "考试必备",
"key": "考试必备",
"icon": "http://img.kiwifruits.cn/classify/11/3.jpg",
"cat": 7
},
{
"name": "笔记本",
"key": "笔记本",
"icon": "http://img.kiwifruits.cn/classify/11/4.jpg",
"cat": 7
},
{
"name": "艺术礼品",
"key": "礼品",
"icon": "http://img.kiwifruits.cn/classify/11/5.jpg",
"cat": 7
},
{
"name": "书写工具",
"key": "书写工具",
"icon": "http://img.kiwifruits.cn/classify/11/6.jpg",
"cat": 7
},
{
"name": "车载电器",
"key": "车载电器",
"icon": "http://img.kiwifruits.cn/classify/11/7.jpg",
"cat": 7
},
{
"name": "图书音像",
"key": "图书音像",
"icon": "http://img.kiwifruits.cn/classify/11/8.jpg",
"cat": 7
},
{
"name": "画具画材",
"key": "画具画材",
"icon": "http://img.kiwifruits.cn/classify/11/9.jpg",
"cat": 7
}
]
},
{
"name": "配饰",
"foods": [
{
"name": "太阳镜",
"key": "太阳镜",
"icon": "http://img.kiwifruits.cn/classify/12/1.jpg",
"cat": 0
},
{
"name": "皮带",
"key": "皮带",
"icon": "http://img.kiwifruits.cn/classify/12/2.jpg",
"cat": 0
},
{
"name": "棒球帽",
"key": "棒球帽",
"icon": "http://img.kiwifruits.cn/classify/12/3.jpg",
"cat": 0
},
{
"name": "手表",
"key": "手表",
"icon": "http://img.kiwifruits.cn/classify/12/4.jpg",
"cat": 0
},
{
"name": "发饰",
"key": "发饰",
"icon": "http://img.kiwifruits.cn/classify/12/5.jpg",
"cat": 0
},
{
"name": "项链",
"key": "项链",
"icon": "http://img.kiwifruits.cn/classify/12/6.jpg",
"cat": 0
},
{
"name": "手饰",
"key": "手饰",
"icon": "http://img.kiwifruits.cn/classify/12/7.jpg",
"cat": 0
},
{
"name": "耳环",
"key": "耳环",
"icon": "http://img.kiwifruits.cn/classify/12/8.jpg",
"cat": 0
},
{
"name": "帽子丝巾",
"key": "帽子丝巾",
"icon": "http://img.kiwifruits.cn/classify/12/9.jpg",
"cat": 0
},
{
"name": "眼镜墨镜",
"key": "眼镜墨镜",
"icon": "http://img.kiwifruits.cn/classify/12/10.jpg",
"cat": 0
},
{
"name": "发带发箍",
"key": "发带发箍",
"icon": "http://img.kiwifruits.cn/classify/12/11.jpg",
"cat": 0
}
]
},
{
"name": "家装家纺",
"foods": [
{
"name": "家居饰品",
"key": "家居饰品",
"icon": "http://img.kiwifruits.cn/classify/13/1.jpg",
"cat": 0
},
{
"name": "凉席",
"key": "凉席",
"icon": "http://img.kiwifruits.cn/classify/13/2.jpg",
"cat": 0
},
{
"name": "背枕靠枕",
"key": "靠枕",
"icon": "http://img.kiwifruits.cn/classify/13/3.jpg",
"cat": 0
},
{
"name": "床上用品",
"key": "床上用品",
"icon": "http://img.kiwifruits.cn/classify/13/4.jpg",
"cat": 0
},
{
"name": "摆件",
"key": "摆件",
"icon": "http://img.kiwifruits.cn/classify/13/5.jpg",
"cat": 0
},
{
"name": "四件套",
"key": "四件套",
"icon": "http://img.kiwifruits.cn/classify/13/6.jpg",
"cat": 0
},
{
"name": "装饰品",
"key": "装饰品",
"icon": "http://img.kiwifruits.cn/classify/13/7.jpg",
"cat": 0
},
{
"name": "卫浴用品",
"key": "卫浴",
"icon": "http://img.kiwifruits.cn/classify/13/8.jpg",
"cat": 0
},
{
"name": "家居家装",
"key": "家具",
"icon": "http://img.kiwifruits.cn/classify/13/9.jpg",
"cat": 0
},
{
"name": "蚊帐",
"key": "蚊帐",
"icon": "http://img.kiwifruits.cn/classify/13/10.jpg",
"cat": 0
},
{
"name": "墙纸贴纸",
"key": "墙纸",
"icon": "http://img.kiwifruits.cn/classify/13/11.jpg",
"cat": 0
},
{
"name": "空调被",
"key": "空调被",
"icon": "http://img.kiwifruits.cn/classify/13/12.jpg",
"cat": 0
}
]
},
{
"name": "户外运动",
"foods": [
{
"name": "游泳装备",
"key": "游泳",
"icon": "http://img.kiwifruits.cn/classify/14/1.jpg",
"cat": 0
},
{
"name": "泳镜",
"key": "泳镜",
"icon": "http://img.kiwifruits.cn/classify/14/2.jpg",
"cat": 0
},
{
"name": "户外装备",
"key": "户外",
"icon": "http://img.kiwifruits.cn/classify/14/3.jpg",
"cat": 0
},
{
"name": "健身服饰",
"key": "健身",
"icon": "http://img.kiwifruits.cn/classify/14/4.jpg",
"cat": 0
},
{
"name": "泳衣",
"key": "泳衣",
"icon": "http://img.kiwifruits.cn/classify/14/5.jpg",
"cat": 0
},
{
"name": "瑜伽垫",
"key": "瑜伽垫",
"icon": "http://img.kiwifruits.cn/classify/14/6.jpg",
"cat": 0
},
{
"name": "瑜伽用品",
"key": "瑜伽",
"icon": "http://img.kiwifruits.cn/classify/14/7.jpg",
"cat": 0
},
{
"name": "健身装备",
"key": "健身",
"icon": "http://img.kiwifruits.cn/classify/14/8.jpg",
"cat": 0
},
{
"name": "球迷用品",
"key": "球迷",
"icon": "http://img.kiwifruits.cn/classify/14/9.jpg",
"cat": 0
}
]
}
]
\ No newline at end of file
// 如果没有通过拦截器配置域名的话,可以在这里写上完整的URL(加上域名部分)
let hotSearchUrl = '/ebapi/store_api/hot_search';
let indexUrl = '/ebapi/public_api/index';
// 此处第二个参数vm,就是我们在页面使用的this,你可以通过vm获取vuex等操作,更多内容详见uView对拦截器的介绍部分:
// https://uviewui.com/js/http.html#%E4%BD%95%E8%B0%93%E8%AF%B7%E6%B1%82%E6%8B%A6%E6%88%AA%EF%BC%9F
const install = (Vue, vm) => {
// 此处没有使用传入的params参数
let getSearch = (params = {}) => vm.$u.get(hotSearchUrl, {
id: 2
});
// 此处使用了传入的params参数,一切自定义即可
let getInfo = (params = {}) => vm.$u.post(indexUrl, params);
// 将各个定义的接口名称,统一放进对象挂载到vm.$u.api(因为vm就是this,也即this.$u.api)下
vm.$u.api = {getSearch, getInfo};
}
export default {
install
}
\ No newline at end of file
// 这里的vm,就是我们在vue文件里面的this,所以我们能在这里获取vuex的变量,比如存放在里面的token
// 同时,我们也可以在此使用getApp().globalData,如果你把token放在getApp().globalData的话,也是可以使用的
const install = (Vue, vm) => {
Vue.prototype.$u.http.setConfig({
baseUrl: 'https://api.youzixy.com',
// 如果将此值设置为true,拦截回调中将会返回服务端返回的所有数据response,而不是response.data
// 设置为true后,就需要在this.$u.http.interceptor.response进行多一次的判断,请打印查看具体值
// originalData: true,
});
// 请求拦截,配置Token等参数
Vue.prototype.$u.http.interceptor.request = (config) => {
config.header.Token = 'xxxxxx';
// 方式一,存放在vuex的token,假设使用了uView封装的vuex方式,见:https://uviewui.com/components/globalVariable.html
// config.header.token = vm.token;
// 方式二,如果没有使用uView封装的vuex方法,那么需要使用$store.state获取
// config.header.token = vm.$store.state.token;
// 方式三,如果token放在了globalData,通过getApp().globalData获取
// config.header.token = getApp().globalData.username;
// 方式四,如果token放在了Storage本地存储中,拦截是每次请求都执行的,所以哪怕您重新登录修改了Storage,下一次的请求将会是最新值
// const token = uni.getStorageSync('token');
// config.header.token = token;
return config;
}
// 响应拦截,判断状态码是否通过
Vue.prototype.$u.http.interceptor.response = (res) => {
// 如果把originalData设置为了true,这里得到将会是服务器返回的所有的原始数据
// 判断可能变成了res.statueCode,或者res.data.code之类的,请打印查看结果
if(res.code == 200) {
// 如果把originalData设置为了true,这里return回什么,this.$u.post的then回调中就会得到什么
return res.data;
} else return false;
}
}
export default {
install
}
\ No newline at end of file
module.exports = {
list: [{
"letter": "A",
"data": [{
"name": "阿拉斯加",
"mobile": "13588889999",
"keyword": "阿拉斯加ABA13588889999"
},
{
"name": "阿克苏",
"mobile": "0551-4386721",
"keyword": "阿克苏AKESU0551-4386721"
},
{
"name": "阿拉善",
"mobile": "4008009100",
"keyword": "阿拉善ALASHAN4008009100"
},
{
"name": "阿勒泰",
"mobile": "13588889999",
"keyword": "阿勒泰ALETAI13588889999"
},
{
"name": "阿里",
"mobile": "13588889999",
"keyword": "阿里ALI13588889999"
},
{
"name": "安阳",
"mobile": "13588889999",
"keyword": "13588889999安阳ANYANG"
}
]
},
{
"letter": "B",
"data": [{
"name": "白城",
"mobile": "该主子没有留电话~",
"keyword": "白城BAICHENG"
},
{
"name": "白山",
"mobile": "13588889999",
"keyword": "白山BAISHAN13588889999"
},
{
"name": "白银",
"mobile": "13588889999",
"keyword": "白银BAIYIN13588889999"
},
{
"name": "保定",
"mobile": "13588889999",
"keyword": "保定BAODING13588889999"
}
]
},
{
"letter": "C",
"data": [{
"name": "沧州",
"mobile": "13588889999",
"keyword": "沧州CANGZHOU13588889999"
},
{
"name": "长春",
"mobile": "13588889999",
"keyword": "长春CHANGCHUN13588889999"
}
]
},
{
"letter": "D",
"data": [{
"name": "大理",
"mobile": "13588889999",
"keyword": "大理DALI13588889999"
},
{
"name": "大连",
"mobile": "13588889999",
"keyword": "大连DALIAN13588889999"
}
]
},
{
"letter": "E",
"data": [{
"name": "鄂尔多斯",
"mobile": "13588889999",
"keyword": "鄂尔多斯EERDUOSI13588889999"
},
{
"name": "恩施",
"mobile": "13588889999",
"keyword": "恩施ENSHI13588889999"
},
{
"name": "鄂州",
"mobile": "13588889999",
"keyword": "鄂州EZHOU13588889999"
}
]
},
{
"letter": "F",
"data": [{
"name": "防城港",
"mobile": "该主子没有留电话~",
"keyword": "防城港FANGCHENGGANG"
},
{
"name": "抚顺",
"mobile": "13588889999",
"keyword": "抚顺FUSHUN13588889999"
},
{
"name": "阜新",
"mobile": "13588889999",
"keyword": "阜新FUXIN13588889999"
},
{
"name": "阜阳",
"mobile": "13588889999",
"keyword": "阜阳FUYANG13588889999"
},
{
"name": "抚州",
"mobile": "13588889999",
"keyword": "抚州FUZHOU13588889999"
},
{
"name": "福州",
"mobile": "13588889999",
"keyword": "福州FUZHOU13588889999"
}
]
},
{
"letter": "G",
"data": [{
"name": "甘南",
"mobile": "13588889999",
"keyword": "甘南GANNAN13588889999"
},
{
"name": "赣州",
"mobile": "13588889999",
"keyword": "赣州GANZHOU13588889999"
},
{
"name": "甘孜",
"mobile": "13588889999",
"keyword": "甘孜GANZI13588889999"
}
]
},
{
"letter": "H",
"data": [{
"name": "哈尔滨",
"mobile": "13588889999",
"keyword": "哈尔滨HAERBIN13588889999"
},
{
"name": "海北",
"mobile": "13588889999",
"keyword": "海北HAIBEI13588889999"
},
{
"name": "海东",
"mobile": "13588889999",
"keyword": "海东HAIDONG13588889999"
},
{
"name": "海口",
"mobile": "13588889999",
"keyword": "海口HAIKOU13588889999"
}
]
},
{
"letter": "I",
"data": [{
"name": "ice",
"mobile": "13588889999",
"keyword": "佳木斯JIAMUSI13588889999"
}]
},
{
"letter": "J",
"data": [{
"name": "佳木斯",
"mobile": "13588889999",
"keyword": "佳木斯JIAMUSI13588889999"
},
{
"name": "吉安",
"mobile": "13588889999",
"keyword": "吉安JIAN13588889999"
},
{
"name": "江门",
"mobile": "13588889999",
"keyword": "江门JIANGMEN13588889999"
}
]
},
{
"letter": "K",
"data": [{
"name": "开封",
"mobile": "13588889999",
"keyword": "开封KAIFENG13588889999"
},
{
"name": "喀什",
"mobile": "13588889999",
"keyword": "喀什KASHI13588889999"
},
{
"name": "克拉玛依",
"mobile": "13588889999",
"keyword": "克拉玛依KELAMAYI13588889999"
}
]
},
{
"letter": "L",
"data": [{
"name": "来宾",
"mobile": "13588889999",
"keyword": "来宾LAIBIN13588889999"
},
{
"name": "兰州",
"mobile": "13588889999",
"keyword": "兰州LANZHOU13588889999"
},
{
"name": "拉萨",
"mobile": "13588889999",
"keyword": "拉萨LASA13588889999"
},
{
"name": "乐山",
"mobile": "13588889999",
"keyword": "乐山LESHAN13588889999"
},
{
"name": "凉山",
"mobile": "13588889999",
"keyword": "凉山LIANGSHAN13588889999"
},
{
"name": "连云港",
"mobile": "13588889999",
"keyword": "连云港LIANYUNGANG13588889999"
},
{
"name": "聊城",
"mobile": "18322223333",
"keyword": "聊城LIAOCHENG18322223333"
},
{
"name": "辽阳",
"mobile": "18322223333",
"keyword": "辽阳LIAOYANG18322223333"
},
{
"name": "辽源",
"mobile": "18322223333",
"keyword": "辽源LIAOYUAN18322223333"
},
{
"name": "丽江",
"mobile": "18322223333",
"keyword": "丽江LIJIANG18322223333"
},
{
"name": "临沧",
"mobile": "18322223333",
"keyword": "临沧LINCANG18322223333"
},
{
"name": "临汾",
"mobile": "18322223333",
"keyword": "临汾LINFEN18322223333"
},
{
"name": "临夏",
"mobile": "18322223333",
"keyword": "临夏LINXIA18322223333"
},
{
"name": "临沂",
"mobile": "18322223333",
"keyword": "临沂LINYI18322223333"
},
{
"name": "林芝",
"mobile": "18322223333",
"keyword": "林芝LINZHI18322223333"
},
{
"name": "丽水",
"mobile": "18322223333",
"keyword": "丽水LISHUI18322223333"
}
]
},
{
"letter": "M",
"data": [{
"name": "眉山",
"mobile": "15544448888",
"keyword": "眉山MEISHAN15544448888"
},
{
"name": "梅州",
"mobile": "15544448888",
"keyword": "梅州MEIZHOU15544448888"
},
{
"name": "绵阳",
"mobile": "15544448888",
"keyword": "绵阳MIANYANG15544448888"
},
{
"name": "牡丹江",
"mobile": "15544448888",
"keyword": "牡丹江MUDANJIANG15544448888"
}
]
},
{
"letter": "N",
"data": [{
"name": "南昌",
"mobile": "15544448888",
"keyword": "南昌NANCHANG15544448888"
},
{
"name": "南充",
"mobile": "15544448888",
"keyword": "南充NANCHONG15544448888"
},
{
"name": "南京",
"mobile": "15544448888",
"keyword": "南京NANJING15544448888"
},
{
"name": "南宁",
"mobile": "15544448888",
"keyword": "南宁NANNING15544448888"
},
{
"name": "南平",
"mobile": "15544448888",
"keyword": "南平NANPING15544448888"
}
]
},
{
"letter": "O",
"data": [{
"name": "欧阳",
"mobile": "15544448888",
"keyword": "欧阳ouyang15544448888"
}]
},
{
"letter": "P",
"data": [{
"name": "盘锦",
"mobile": "15544448888",
"keyword": "盘锦PANJIN15544448888"
},
{
"name": "攀枝花",
"mobile": "15544448888",
"keyword": "攀枝花PANZHIHUA15544448888"
},
{
"name": "平顶山",
"mobile": "15544448888",
"keyword": "平顶山PINGDINGSHAN15544448888"
},
{
"name": "平凉",
"mobile": "15544448888",
"keyword": "平凉PINGLIANG15544448888"
},
{
"name": "萍乡",
"mobile": "15544448888",
"keyword": "萍乡PINGXIANG15544448888"
},
{
"name": "普洱",
"mobile": "15544448888",
"keyword": "普洱PUER15544448888"
},
{
"name": "莆田",
"mobile": "15544448888",
"keyword": "莆田PUTIAN15544448888"
},
{
"name": "濮阳",
"mobile": "15544448888",
"keyword": "濮阳PUYANG15544448888"
}
]
},
{
"letter": "Q",
"data": [{
"name": "黔东南",
"mobile": "15544448888",
"keyword": "黔东南QIANDONGNAN15544448888"
},
{
"name": "黔南",
"mobile": "15544448888",
"keyword": "黔南QIANNAN15544448888"
},
{
"name": "黔西南",
"mobile": "15544448888",
"keyword": "黔西南QIANXINAN15544448888"
}
]
},
{
"letter": "R",
"data": [{
"name": "日喀则",
"mobile": "15544448888",
"keyword": "日喀则RIKAZE15544448888"
},
{
"name": "日照",
"mobile": "15544448888",
"keyword": "日照RIZHAO15544448888"
}
]
},
{
"letter": "S",
"data": [{
"name": "三门峡",
"mobile": "15544448888",
"keyword": "三门峡SANMENXIA15544448888"
},
{
"name": "三明",
"mobile": "15544448888",
"keyword": "三明SANMING15544448888"
},
{
"name": "三沙",
"mobile": "15544448888",
"keyword": "三沙SANSHA15544448888"
}
]
},
{
"letter": "T",
"data": [{
"name": "塔城",
"mobile": "15544448888",
"keyword": "塔城TACHENG15544448888"
},
{
"name": "漯河",
"mobile": "15544448888",
"keyword": "漯河TAHE15544448888"
},
{
"name": "泰安",
"mobile": "15544448888",
"keyword": "泰安TAIAN15544448888"
}
]
},
{
"letter": "W",
"data": [{
"name": "潍坊",
"mobile": "15544448888",
"keyword": "潍坊WEIFANG15544448888"
},
{
"name": "威海",
"mobile": "15544448888",
"keyword": "威海WEIHAI15544448888"
},
{
"name": "渭南",
"mobile": "15544448888",
"keyword": "渭南WEINAN15544448888"
},
{
"name": "文山",
"mobile": "15544448888",
"keyword": "文山WENSHAN15544448888"
}
]
},
{
"letter": "X",
"data": [{
"name": "厦门",
"mobile": "15544448888",
"keyword": "厦门XIAMEN15544448888"
},
{
"name": "西安",
"mobile": "15544448888",
"keyword": "西安XIAN15544448888"
},
{
"name": "湘潭",
"mobile": "15544448888",
"keyword": "湘潭XIANGTAN15544448888"
}
]
},
{
"letter": "Y",
"data": [{
"name": "雅安",
"mobile": "15544448888",
"keyword": "雅安YAAN15544448888"
},
{
"name": "延安",
"mobile": "15544448888",
"keyword": "延安YANAN15544448888"
},
{
"name": "延边",
"mobile": "15544448888",
"keyword": "延边YANBIAN15544448888"
},
{
"name": "盐城",
"mobile": "15544448888",
"keyword": "盐城YANCHENG15544448888"
}
]
},
{
"letter": "Z",
"data": [{
"name": "枣庄",
"mobile": "15544448888",
"keyword": "枣庄ZAOZHUANG15544448888"
},
{
"name": "张家界",
"mobile": "15544448888",
"keyword": "张家界ZHANGJIAJIE15544448888"
},
{
"name": "张家口",
"mobile": "15544448888",
"keyword": "张家口ZHANGJIAKOU15544448888"
}
]
},
{
"letter": "#",
"data": [{
"name": "其他.",
"mobile": "16666666666",
"keyword": "echo16666666666"
}]
}
]
}
<template>
<view class="nav-wrap">
<view class="nav-title">
<image class="logo" src="https://cdn.uviewui.com/uview/common/logo.png" mode="widthFix"></image>
<view class="nav-info">
<view class="nav-title__text">
uView UI
</view>
<view class="nav-slogan">
多平台快速开发的UI框架
</view>
</view>
</view>
<view class="nav-desc">
{{desc}}
</view>
</view>
</template>
<script>
export default {
props: {
desc: String
}
}
</script>
<style lang="scss" scoped>
.nav-wrap {
padding: 30rpx;
}
.nav-title {
display: flex;
align-items: center;
}
.nav-info {
margin-left: 30rpx;
}
.nav-title__text {
display: flex;
color: $u-main-color;
font-size: 50rpx;
font-weight: bold;
}
.logo {
width: 140rpx;
height: auto;
}
.nav-slogan {
color: $u-tips-color;
font-size: 28rpx;
}
.nav-desc {
margin-top: 20rpx;
font-size: 28rpx;
color: $u-content-color;
}
</style>
/*
* @Desc: --- ----
* @Date: 2020-04-22 12:29:21
* @LastEditors: 王
* @LastEditTime: 2020-04-22 15:18:39
*/
import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
App.mpType = 'app'
// 此处为演示Vue.prototype使用,非uView的功能部分
Vue.prototype.vuePrototype = '枣红'
// 引入全局uView
import uView from 'uview-ui'
Vue.use(uView)
// 此处为演示vuex使用,非uView的功能部分
import store from '@/store'
// 引入uView提供的对vuex的简写法文件
let vuexStore = require('@/store/$u.mixin.js')
Vue.mixin(vuexStore)
// 引入uView对小程序分享的mixin封装
let mpShare = require('uview-ui/libs/mixin/mpShare.js');
Vue.mixin(mpShare)
const app = new Vue({
store,
...App
})
// http拦截器,将此部分放在new Vue()和app.$mount()之间,才能App.vue中正常使用
import httpInterceptor from '@/common/http.interceptor.js'
Vue.use(httpInterceptor, app)
// http接口API抽离,免于写url或者一些固定的参数
import httpApi from '@/common/http.api.js'
Vue.use(httpApi, app)
app.$mount()
{
"name" : "uView",
"appid" : "__UNI__60F4B81",
"description" : "多平台快速开发的UI框架",
"versionName" : "1.0.0",
"versionCode" : "100",
"transformPx" : false,
"app-plus" : {
"safearea" : {
"bottom" : {
"offset" : "none"
}
},
"splashscreen" : {
"alwaysShowBeforeRender" : true,
"waiting" : true,
"autoclose" : true,
"delay" : 0
},
"usingComponents" : true,
"nvueCompiler" : "uni-app",
"compilerVersion" : 3,
"modules" : {},
"distribute" : {
"android" : {
"permissions" : [
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
"<uses-permission android:name=\"android.permission.READ_CONTACTS\"/>",
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
"<uses-permission android:name=\"android.permission.WRITE_CONTACTS\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
"<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>",
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
"<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>",
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
"<uses-permission android:name=\"android.permission.CALL_PHONE\"/>",
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>",
"<uses-feature android:name=\"android.hardware.camera\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>",
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
],
"abiFilters" : [ "armeabi-v7a", "arm64-v8a" ]
},
"ios" : {},
"sdkConfigs" : {
"ad" : {}
},
"icons" : {
"android" : {
"hdpi" : "unpackage/res/icons/72x72.png",
"xhdpi" : "unpackage/res/icons/96x96.png",
"xxhdpi" : "unpackage/res/icons/144x144.png",
"xxxhdpi" : "unpackage/res/icons/192x192.png"
},
"ios" : {
"appstore" : "unpackage/res/icons/1024x1024.png",
"ipad" : {
"app" : "unpackage/res/icons/76x76.png",
"app@2x" : "unpackage/res/icons/152x152.png",
"notification" : "unpackage/res/icons/20x20.png",
"notification@2x" : "unpackage/res/icons/40x40.png",
"proapp@2x" : "unpackage/res/icons/167x167.png",
"settings" : "unpackage/res/icons/29x29.png",
"settings@2x" : "unpackage/res/icons/58x58.png",
"spotlight" : "unpackage/res/icons/40x40.png",
"spotlight@2x" : "unpackage/res/icons/80x80.png"
},
"iphone" : {
"app@2x" : "unpackage/res/icons/120x120.png",
"app@3x" : "unpackage/res/icons/180x180.png",
"notification@2x" : "unpackage/res/icons/40x40.png",
"notification@3x" : "unpackage/res/icons/60x60.png",
"settings@2x" : "unpackage/res/icons/58x58.png",
"settings@3x" : "unpackage/res/icons/87x87.png",
"spotlight@2x" : "unpackage/res/icons/80x80.png",
"spotlight@3x" : "unpackage/res/icons/120x120.png"
}
}
}
}
},
"quickapp" : {},
"mp-weixin" : {
"appid" : "wxc256e348c4032ebd",
"setting" : {
"urlCheck" : true,
"es6" : false,
"minified" : true,
"postcss" : true
},
"optimization" : {
"subPackages" : true
},
"usingComponents" : true
},
"mp-alipay" : {
"usingComponents" : true
},
"mp-baidu" : {
"usingComponents" : true
},
"mp-toutiao" : {
"usingComponents" : true
},
"h5" : {
"template" : "template.h5.html",
"router" : {
"mode" : "history"
},
"optimization" : {
"treeShaking" : {
"enable" : true
}
}
}
}
{
"easycom": {
"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
},
// "condition": { //模式配置,仅开发期间生效
// "current": 0, //当前激活的模式(list 的索引项)
// "list": [{
// "name": "test", //模式名称
// "path": "pages/componentsB/upload/index", //启动页面,必选
// "query": "id=1&name=2" //启动参数,在页面的-+onLoad函数里面得到
// }]
// },
"pages": [
// 演示-组件
{
"path": "pages/example/components",
"style": {
"navigationBarTitleText": "组件"
}
},
// avatarCropper-头像裁剪
{
"path": "uview-ui/components/u-avatar-cropper/u-avatar-cropper",
"style": {
"navigationBarTitleText": "头像裁剪",
"navigationBarBackgroundColor": "#000000"
}
},
// 演示-工具
{
"path": "pages/example/js",
"style": {
"navigationBarTitleText": "工具"
}
},
// 演示-模板
{
"path": "pages/example/template",
"style": {
"navigationBarTitleText": "模板"
}
},
// fullScreen-压窗屏
{
"path": "uview-ui/components/u-full-screen/u-full-screen",
"style": {
"navigationStyle": "custom",
"app-plus": {
"animationType": "fade-in",
"background": "transparent",
"backgroundColor": "rgba(0,0,0,0)",
"popGesture": "none"
}
}
}
],
"subPackages": [{
"root": "pages/componentsC",
"pages": [
// test-测试
{
"path": "test/index",
"style": {
// "navigationBarTitleText": "navbar-自定义导航栏",
"navigationStyle": "custom" ,// 隐藏系统导航栏
"navigationBarTextStyle": "white" // 状态栏字体为白色
}
},
// gap-间隔槽
{
"path": "gap/index",
"style": {
"navigationBarTitleText": "gap-间隔槽"
}
},
// subsection分段器
{
"path": "subsection/index",
"style": {
"navigationBarTitleText": "subsection-分段器"
}
},
// section 查看更多
{
"path": "section/index",
"style": {
"navigationBarTitleText": "section-查看更多"
}
},
// link链接
{
"path": "link/index",
"style": {
"navigationBarTitleText": "link-链接"
}
},
// mask遮罩层
{
"path": "mask/index",
"style": {
"navigationBarTitleText": "mask-遮罩层"
}
},
// countTo数字滚动
{
"path": "countTo/index",
"style": {
"navigationBarTitleText": "countTo-数字滚动"
}
},
// color颜色
{
"path": "color/index",
"style": {
"navigationBarTitleText": "color-颜色"
}
},
// countDown倒计时
{
"path": "countDown/index",
"style": {
"navigationBarTitleText": "countDown-倒计时"
}
},
// progress进度条
{
"path": "progress/index",
"style": {
"navigationBarTitleText": "progress-进度条"
}
},
// alertTips警告提示
{
"path": "alertTips/index",
"style": {
"navigationBarTitleText": "alertTips-警告提示"
}
},
// badge 徽标数
{
"path": "badge/index",
"style": {
"navigationBarTitleText": "badge-徽标数"
}
},
// button按钮
{
"path": "button/index",
"style": {
"navigationBarTitleText": "button-按钮"
}
},
// collapse折叠面板
{
"path": "collapse/index",
"style": {
"navigationBarTitleText": "collapse-折叠面板"
}
},
// actionSheet操作菜单
{
"path": "actionSheet/index",
"style": {
"navigationBarTitleText": "actionSheet-操作菜单"
}
},
// messageInput验证码输入
{
"path": "messageInput/index",
"style": {
"navigationBarTitleText": "messageInput-验证码输入"
}
},
// popup弹窗
{
"path": "popup/index",
"style": {
"navigationBarTitleText": "popup-弹窗"
}
},
// listCell
{
"path": "cell/index",
"style": {
"navigationBarTitleText": "listCell-列表"
}
},
// numberBox数字输入框
{
"path": "numberBox/index",
"style": {
"navigationBarTitleText": "numberBox-步进器"
}
},
// grid宫格布局
{
"path": "grid/index",
"style": {
"navigationBarTitleText": "grid-宫格布局"
}
},
// layout栅格布局
{
"path": "layout/index",
"style": {
"navigationBarTitleText": "layout-栅格布局"
}
},
// 加载更多
{
"path": "loadmore/index",
"style": {
"navigationBarTitleText": "loadmore-加载更多"
}
}
]
},
{
"root": "pages/template",
"pages": [
// mallMenu商城分类
{
"path": "mallMenu/index2",
"style": {
"navigationBarTitleText": "mallMenu-商城分类"
}
},
// mallMenu商城分类
{
"path": "mallMenu/index1",
"style": {
"navigationBarTitleText": "mallMenu-商城分类"
}
},
// coupon优惠券
{
"path": "coupon/index",
"style": {
"navigationBarTitleText": "coupon-优惠券"
}
},
{
"path": "login/index",
"style": {
"navigationBarTitleText": "美团登录"
}
},
// SubmitBar提交订单栏
{
"path": "submitBar/index",
"style": {
"navigationBarTitleText": "提交订单栏"
}
},
// comment评论
{
"path": "comment/index",
"style": {
"navigationBarTitleText": "评论"
}
},
// comment评论详情
{
"path": "comment/reply",
"style": {
"navigationBarTitleText": "评论详情"
}
},
// order订单
{
"path": "order/index",
"style": {
"navigationBarTitleText": "订单"
}
},
// login登录获取验证码
{
"path": "login/code",
"style": {
"navigationBarTitleText": "登录获取验证码"
}
},
// address用户地址
{
"path": "address/index",
"style": {
"navigationBarTitleText": "用户地址"
}
},
// address添加用户地址
{
"path": "address/addSite",
"style": {
"navigationBarTitleText": "添加用户地址"
}
}
]
},
{
"root": "pages/library",
"pages": [
// getRect-元素节点
{
"path": "getRect/index",
"style": {
"navigationBarTitleText": "getRect-元素节点"
}
},
// timeFrom-多久之前
{
"path": "timeFrom/index",
"style": {
"navigationBarTitleText": "timeFrom-多久之前"
}
},
// globalData-全局变量
{
"path": "globalVariable/globalData",
"style": {
"navigationBarTitleText": "globalData-全局变量"
}
},
// prototype-全局变量
{
"path": "globalVariable/prototype",
"style": {
"navigationBarTitleText": "prototype-全局变量"
}
},
// vuex-全局变量
{
"path": "globalVariable/vuex",
"style": {
"navigationBarTitleText": "vuex-全局变量"
}
},
// globalVariable-全局变量
{
"path": "globalVariable/index",
"style": {
"navigationBarTitleText": "globalVariable-全局变量"
}
},
// http-请求
{
"path": "http/index",
"style": {
"navigationBarTitleText": "http-请求"
}
},
// test-规则验证
{
"path": "test/index",
"style": {
"navigationBarTitleText": "test-规则验证"
}
},
// mpShare-小程序分享
{
"path": "mpShare/index",
"style": {
"navigationBarTitleText": "mpShare-小程序分享"
}
},
// color-JS调用颜色
{
"path": "color/index",
"style": {
"navigationBarTitleText": "color-JS调用颜色"
}
},
// trim-去除空格
{
"path": "trim/index",
"style": {
"navigationBarTitleText": "trim-去除空格"
}
},
// random-随机数生成
{
"path": "random/index",
"style": {
"navigationBarTitleText": "random-随机数生成"
}
},
// md5加密
{
"path": "md5/index",
"style": {
"navigationBarTitleText": "md5-加密"
}
},
// colorSwitch颜色转换
{
"path": "colorSwitch/index",
"style": {
"navigationBarTitleText": "colorSwitch-颜色转换"
}
},
// randomArray数组乱序
{
"path": "randomArray/index",
"style": {
"navigationBarTitleText": "randomArray-数组乱序"
}
},
// guid全局唯一标识符
{
"path": "guid/index",
"style": {
"navigationBarTitleText": "guid-全局唯一标识符"
}
},
// timeFormat时间格式化
{
"path": "timeFormat/index",
"style": {
"navigationBarTitleText": "timeFormat-时间格式化"
}
}, // route-路由
{
"path": "route/index",
"style": {
"navigationBarTitleText": "route-路由"
}
},
// route-路由跳转
{
"path": "route/routeTo",
"style": {
"navigationBarTitleText": "route-路由跳转"
}
},
// queryParams-对象转URL参数
{
"path": "queryParams/index",
"style": {
"navigationBarTitleText": "queryParams-对象转URL参数"
}
}
]
},
{
"root": "pages/componentsA",
"pages": [
// slider-滑动选择器
{
"path": "slider/index",
"style": {
"navigationBarTitleText": "slider-滑动选择器"
}
},
// fullScreen-压窗屏
{
"path": "fullScreen/index",
"style": {
"navigationBarTitleText": "fullScreen-压窗屏"
}
},
// navbar-自定义导航栏
{
"path": "navbar/index",
"style": {
// "navigationBarTitleText": "navbar-自定义导航栏",
"navigationStyle": "custom" ,// 隐藏系统导航栏
"navigationBarTextStyle": "white" // 状态栏字体为白色
}
},
// field-输入框
{
"path": "field/index",
"style": {
"navigationBarTitleText": "field-输入框"
}
},
// modal-模态框
{
"path": "modal/index",
"style": {
"navigationBarTitleText": "modal-模态框"
}
},
// indexList索引列表
{
"path": "indexList/index",
"style": {
"navigationBarTitleText": "indexList-索引列表"
}
},
// empty内容为空
{
"path": "empty/index",
"style": {
"navigationBarTitleText": "empty-内容为空"
}
},
// avatarCropper-头像裁剪
{
"path": "avatarCropper/index",
"style": {
"navigationBarTitleText": "avatarCropper-头像裁剪"
}
}, // noNetwork没有网络
{
"path": "noNetwork/index",
"style": {
"navigationBarTitleText": "noNetwork-没有网络"
}
}, // icon字体图标
{
"path": "icon/index",
"style": {
"navigationBarTitleText": "icon-字体图标"
}
}, // avatar-用户头像展示
{
"path": "avatar/index",
"style": {
"navigationBarTitleText": "avatar-用户头像展示"
}
}, // keyboard键盘
{
"path": "keyboard/index",
"style": {
"navigationBarTitleText": "keyboard-键盘"
}
}, // 图片懒加载
{
"path": "lazyLoad/index",
"style": {
"navigationBarTitleText": "lazyLoad-懒加载"
}
},
// tabs切换
{
"path": "tabs/index",
"style": {
"navigationBarTitleText": "Tabs-切换"
}
},
// tag标签
{
"path": "tag/index",
"style": {
"navigationBarTitleText": "tag-标签"
}
},
// timeLine时间轴
{
"path": "timeLine/index",
"style": {
"navigationBarTitleText": "timeLine-时间轴"
}
},
// toast轻提示
{
"path": "toast/index",
"style": {
"navigationBarTitleText": "toast-轻提示"
}
},
// topTips消息提示
{
"path": "topTips/index",
"style": {
"navigationBarTitleText": "topTips-消息提示"
}
},
// Code-验证码倒计时
{
"path": "verificationCode/index",
"style": {
"navigationBarTitleText": "Code-验证码倒计时"
}
}
]
},
{
"root": "pages/componentsB",
"pages": [
// divider-分割线
{
"path": "divider/index",
"style": {
"navigationBarTitleText": "divider-分割线"
}
},
// picker选择器
{
"path": "picker/index",
"style": {
"navigationBarTitleText": "picker-选择器"
}
}, // noticeBar通告栏
{
"path": "noticeBar/index",
"style": {
"navigationBarTitleText": "noticeBar-通告栏"
}
},
// checkbox-复选框
{
"path": "checkbox/index",
"style": {
"navigationBarTitleText": "checkbox-复选框"
}
},
// radio-单选框
{
"path": "radio/index",
"style": {
"navigationBarTitleText": "radio-单选框"
}
},
// loading-加载动画
{
"path": "loading/index",
"style": {
"navigationBarTitleText": "loading-加载动画"
}
},
// switch-开关选择器
{
"path": "switch/index",
"style": {
"navigationBarTitleText": "switch-开关选择器"
}
},
// 骨架屏
{
"path": "skeleton/index",
"style": {
"navigationBarTitleText": "skeleton-骨架屏"
}
}, // upload上传
{
"path": "upload/index",
"style": {
"navigationBarTitleText": "upload-上传"
}
}, // validation表单验证
{
"path": "validation/index",
"style": {
"navigationBarTitleText": "validation-表单验证"
}
}, // waterfall瀑布流
{
"path": "waterfall/index",
"style": {
"navigationBarTitleText": "waterfall-瀑布流"
}
},
// table表格
{
"path": "table/index",
"style": {
"navigationBarTitleText": "table-表格"
}
},
// rate评分
{
"path": "rate/index",
"style": {
"navigationBarTitleText": "rate-评分"
}
},
// readMore显示更多
{
"path": "readMore/index",
"style": {
"navigationBarTitleText": "readMore-查看更多"
}
},
// search搜索框
{
"path": "search/index",
"style": {
"navigationBarTitleText": "search-搜索框"
}
},
// steps步骤条
{
"path": "steps/index",
"style": {
"navigationBarTitleText": "steps-步骤条"
}
},
// sticky吸顶
{
"path": "sticky/index",
"style": {
"navigationBarTitleText": "sticky-吸顶"
}
},
// swiper轮播图
{
"path": "swiper/index",
"style": {
"navigationBarTitleText": "swiper-轮播图"
}
},
// swipeAction-左滑删除
{
"path": "swipeAction/index",
"style": {
"navigationBarTitleText": "swipeAction-左滑删除"
}
}
]
}
],
"preloadRule": {
"pages/example/components": {
"network": "all",
"packages": ["pages/componentsA", "pages/componentsB", "pages/componentsC"]
}
},
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uView",
"navigationBarBackgroundColor": "#FFFFFF",
"backgroundColor": "#FFFFFF"
},
"tabBar": {
"color": "#909399",
"selectedColor": "#303133",
"backgroundColor": "#FFFFFF",
// #ifdef APP-PLUS
"blurEffect": "light",
// #endif
"borderStyle": "black",
"list": [{
"pagePath": "pages/example/components",
"iconPath": "static/uview/example/component.png",
"selectedIconPath": "static/uview/example/component_select.png",
"text": "组件"
},
{
"pagePath": "pages/example/js",
"iconPath": "static/uview/example/js.png",
"selectedIconPath": "static/uview/example/js_select.png",
"text": "工具"
},
{
"pagePath": "pages/example/template",
"iconPath": "static/uview/example/template.png",
"selectedIconPath": "static/uview/example/template_select.png",
"text": "模板"
}
]
}
}
<template>
<view class="u-demo">
<view class="u-demo-wrap">
<view class="u-demo-title">演示效果</view>
<view class="u-demo-area">
<u-avatar :mode="mode" :size="size" :src="src" :text="text">
</u-avatar>
</view>
</view>
<view class="u-config-wrap">
<view class="u-config-title u-border-bottom">
参数配置
</view>
<view class="u-config-item">
<view class="u-item-title">模式选择</view>
<u-subsection vibrateShort :list="['圆形', '圆角方形']" @change="modeChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">自定义内容</view>
<u-subsection vibrateShort current="1" :list="['默认', '图片', '文字']" @change="styleChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">尺寸</view>
<u-subsection vibrateShort current="1" :list="['large', 'default', 'mini', 160]" @change="sizeChange"></u-subsection>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
mode: 'circle',
src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
text: '', // 优先级比src高
size: '90'
}
},
methods: {
modeChange(index) {
this.mode = index == 0 ? 'circle' : 'square';
},
styleChange(index) {
if(index == 0) {
this.src = '';
this.text = '';
} else if(index == 1) {
this.text = '';
this.src = 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg';
} else {
this.text = '无头像';
}
},
sizeChange(index) {
this.size = index == 0 ? 'large' : index == 1 ? 'default' : index == 2 ? 'mini' : 160;
}
}
}
</script>
<style lang="scss" scoped>
</style>
<template>
<view class="u-demo">
<view class="u-demo-wrap">
<view class="u-demo-title">演示效果</view>
<view class="u-demo-area">
<u-toast ref="uToast"></u-toast>
<view class="u-avatar-wrap">
<image @tap="preAvatar" class="u-avatar-demo" v-if="avatar" :src="avatar" mode="aspectFill"></image>
</view>
<u-button @tap="chooseAvatar">选择图片</u-button>
</view>
</view>
<!-- <view class="u-config-wrap">
<view class="u-config-title u-border-bottom">
参数配置
</view>
<view class="u-config-item">
<view class="u-item-title">生成图片质量</view>
<u-subsection vibrateShort :current="1" :list="['0.3', '0.7', '1']" @change="qualityChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">自定义参数</view>
<u-subsection vibrateShort :current="1" :list="['是', '否']" @change="styleChange"></u-subsection>
</view>
</view> -->
</view>
</template>
<script>
export default {
data() {
return {
avatar: 'https://cdn.uviewui.com/uview/common/logo.png',
}
},
created() {
uni.$on('uAvatarCropper', path => {
this.avatar = path;
// 可以在此上传到服务端
// uni.uploadFile({
// url: 'http://192.168.100.17/index.php/index/index/upload',
// filePath: path,
// name: 'file',
// complete: (res) => {
// console.log(res);
// }
// });
})
},
methods: {
chooseAvatar() {
this.$u.route({
url: '/uview-ui/components/u-avatar-cropper/u-avatar-cropper',
params: {
// 输出图片宽度,高等于宽,单位px
destWidth: 300,
// 裁剪框宽度,高等于宽,单位px
rectWidth: 200,
// 输出的图片类型,如果'png'类型发现裁剪的图片太大,改成"jpg"即可
fileType: 'jpg',
}
})
},
qualityChange(index) {
this.quality = index == 0 ? 0.3 : index == 1 ? 0.7 : 1;
},
styleChange(index) {
if (index == 0) {
this.rectHeight = this.rectWidth = this.destHeight = this.destWidth = 200;
this.boundStyle = {
lineWidth: 8,
borderColor: this.$u.color['error'],
mask: 'rgba(0, 0, 0, 0.8)'
}
} else {
this.rectHeight = this.rectWidth = this.destHeight = this.destWidth = 400;
this.boundStyle = {
lineWidth: 4,
borderColor: 'rgb(245, 245, 245)',
mask: 'rgba(0, 0, 0, 0.35)'
}
}
},
// 预览图片
preAvatar() {
wx.previewImage({
current: '', // 当前显示图片的 http 链接
urls: [this.avatar] // 需要预览的图片 http 链接列表
})
}
}
}
</script>
<style lang="scss" scoped>
.wrap {
padding: 24rpx;
}
.u-avatar-wrap {
overflow: hidden;
margin-bottom: 20rpx;
}
.u-avatar-demo {
width: 150rpx;
height: 150rpx;
border-radius: 100rpx;
}
</style>
<template>
<view class="u-demo">
<view class="u-demo-wrap">
<view class="u-demo-title">演示效果</view>
<view class="u-demo-area">
<u-empty :mode="mode">
<u-button v-if="slot" slot="bottom" size="medium">
slot按钮
</u-button>
</u-empty>
</view>
</view>
<view class="u-config-wrap">
<view class="u-config-title u-border-bottom">
参数配置
</view>
<view class="u-config-item">
<view class="u-item-title">模式选择</view>
<u-table>
<u-tr>
<u-td>
<u-button :hair-line="false" size="mini" @tap="modeChange('car')">购物车为空</u-button>
</u-td>
<u-td>
<u-button :hair-line="false" size="mini" @tap="modeChange('page')">页面不存在</u-button>
</u-td>
<u-td>
<u-button :hair-line="false" size="mini" @tap="modeChange('search')">没有搜索结果</u-button>
</u-td>
</u-tr>
<u-tr>
<u-td>
<u-button :hair-line="false" size="mini" @tap="modeChange('address')">没有收货地址</u-button>
</u-td>
<u-td>
<u-button :hair-line="false" size="mini" @tap="modeChange('wifi')">没有WiFi</u-button>
</u-td>
<u-td>
<u-button :hair-line="false" size="mini" @tap="modeChange('order')">订单为空</u-button>
</u-td>
</u-tr>
<u-tr>
<u-td>
<u-button :hair-line="false" size="mini" @tap="modeChange('coupon')">没有优惠券</u-button>
</u-td>
<u-td>
<u-button :hair-line="false" size="mini" @tap="modeChange('favor')">没有收藏</u-button>
</u-td>
<u-td>
<u-button :hair-line="false" size="mini" @tap="modeChange('permission')">无权限</u-button>
</u-td>
</u-tr>
<u-tr>
<u-td>
<u-button :hair-line="false" size="mini" @tap="modeChange('history')">无历史记录</u-button>
</u-td>
<u-td>
<u-button :hair-line="false" size="mini" @tap="modeChange('news')">无新闻列表</u-button>
</u-td>
<u-td>
<u-button :hair-line="false" size="mini" @tap="modeChange('message')">消息列表为空</u-button>
</u-td>
</u-tr>
<u-tr>
<u-td>
<u-button :hair-line="false" size="mini" @tap="modeChange('list')">列表为空</u-button>
</u-td>
<u-td>
<u-button :hair-line="false" size="mini" @tap="modeChange('data')">数据为空</u-button>
</u-td>
<u-td>
待扩展
</u-td>
</u-tr>
</u-table>
</view>
<view class="u-config-item">
<view class="u-item-title">传入slot</view>
<u-subsection vibrateShort current="1" :list="['是', '否']" @change="slotChange"></u-subsection>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
mode: 'data',
slot: false
}
},
methods: {
modeChange(mode = 'data') {
this.mode = mode;
},
slotChange(index) {
this.slot = !index;
}
}
}
</script>
<style lang="scss" scoped>
.u-demo-area {
height: 160px;
display: flex;
align-items: center;
justify-content: center;
}
.u-demo-area .u-empty {
padding-top: 0;
}
</style>
<template>
<view class="u-demo">
<view class="u-demo-wrap" style="background-color: #FFFFFF;">
<view class="u-demo-title">演示效果</view>
<view class="u-demo-area">
<u-cell-group>
<u-field
v-model="mobile"
label="手机号"
:error-message="errorMessage"
placeholder="请填写手机号"
:required="required"
:icon="icon1"
:type="type"
>
</u-field>
<u-field
v-model="code"
label="验证码"
placeholder="请填写验证码"
:required="required"
:icon="icon2"
>
<u-button v-if="showBtn" slot="button" size="mini" type="success">发送验证码</u-button>
</u-field>
</u-cell-group>
</view>
</view>
<view class="u-config-wrap">
<view class="u-config-title u-border-bottom">
参数配置
</view>
<view class="u-config-item">
<view class="u-item-title">右侧按钮</view>
<u-subsection vibrateShort current="1" :list="['是', '否']" @change="showBtnChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">显示错误信息</view>
<u-subsection vibrateShort current="1" :list="['是', '否']" @change="errorMessageChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">是否必填</view>
<u-subsection vibrateShort current="1" :list="['是', '否']" @change="requiredChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">显示左图标和右箭头</view>
<u-subsection vibrateShort current="1" :list="['是', '否']" @change="customChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">第一个输入框为textarea类型</view>
<u-subsection vibrateShort current="1" :list="['是', '否']" @change="textareaChange"></u-subsection>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
mobile: '',
code: '',
errorMessage: '',
required: false,
placeholderColor: this.$u.color['tipsColor'],
arrow: false,
showBtn: false,
icon1: '',
icon2: '',
type: 'text',
}
},
methods: {
showBtnChange(index) {
this.showBtn = index == 0 ? true : false;
},
errorMessageChange(index) {
this.errorMessage = index == 0 ? '手机号有误' : false
},
requiredChange(index) {
this.required = index == 0 ? true : false;
},
customChange(index) {
if(index == 0) {
this.icon1 = 'map';
this.icon2 = 'photo';
this.arrow = true;
} else {
this.icon1 = '';
this.icon2 = '';
this.arrow = false;
}
},
textareaChange(index) {
this.type = index == 0 ? 'textarea' : 'text';
}
}
}
</script>
<style lang="scss" scoped>
.u-demo {
}
</style>
<template>
<view class="u-demo">
<view class="u-demo-wrap">
<view class="u-demo-title">演示效果</view>
<view class="u-demo-area">
<view class="u-no-demo-here">
通过压窗屏打开的模态框,可以遮盖顶部原生的导航栏和底部tabbar栏。
注意:压窗屏只对APP有效,其他端无效。
</view>
</view>
</view>
<view class="u-config-wrap">
<view class="u-config-title u-border-bottom">
参数配置
</view>
<view class="u-config-item">
<view class="u-item-title">状态</view>
<u-subsection vibrateShort :current="current" :list="['打开', '关闭']" @change="openModal"></u-subsection>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
current: 1
}
},
onShow() {
this.$nextTick(function(){
this.current = 1;
})
},
methods: {
openModal(index) {
// 可以传递参数
if(index == 0) {
this.$u.route("/uview-ui/components/u-full-screen/u-full-screen?id=1");
}
}
}
}
</script>
<style lang="scss" scoped>
.u-demo {}
</style>
<template>
<view class="wrap">
<view class="u-border-left u-border-top inner-wrap">
<view @tap="selectIcon(item.name)" class="u-icon-item u-border-bottom u-border-right" v-for="(item, index) in iconList" :key="index">
<u-icon :name="item.name" size="40" color="#909399"></u-icon>
<text class="u-icon-name">{{item.name}}</text>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
iconList: [
{
name: 'chat'
},
{
name: 'chat-fill'
},
{
name: 'red-packet'
},
{
name: 'red-packet-fill'
},
{
name: 'order'
},
{
name: 'checkbox-mark'
},
{
name: 'arrow-up-fill'
},
{
name: 'arrow-down-fill'
},
{
name: 'backspace'
},
{
name: 'photo'
},
{
name: 'photo-fill'
},
{
name: 'lock'
},
{
name: 'lock-fill'
},
{
name: 'lock-open'
},
{
name: 'lock-opened-fill'
},
{
name: 'hourglass'
},
{
name: 'hourglass-half-fill'
},
{
name: 'home'
},
{
name: 'home-fill'
},
{
name: 'fingerprint'
},
{
name: 'cut'
},
{
name: 'star'
},
{
name: 'star-fill'
},
{
name: 'share'
},
{
name: 'share-fill'
},
{
name: 'volume-up'
},
{
name: 'volume-up-fill'
},
{
name: 'volume-off'
},
{
name: 'volume-off-fill'
},
{
name: 'trash'
},
{
name: 'trash-fill'
},
{
name: 'rewind-right'
},
{
name: 'rewind-right-fill'
},
{
name: 'rewind-left'
},
{
name: 'rewind-left-fill'
},
{
name: 'shopping-cart'
},
{
name: 'shopping-cart-fill'
},
{
name: 'question'
},
{
name: 'question-circle'
},
{
name: 'question-circle-fill'
},
{
name: 'plus'
},
{
name: 'plus-circle'
},
{
name: 'plus-circle-fill'
},
{
name: 'tags'
},
{
name: 'tags-fill'
},
{
name: 'pause'
},
{
name: 'pause-circle'
},
{
name: 'pause-circle-fill'
},
{
name: 'play-circle'
},
{
name: 'play-circle-fill'
},
{
name: 'map'
},
{
name: 'map-fill'
},
{
name: 'phone'
},
{
name: 'phone-fill'
},
{
name: 'list'
},
{
name: 'list-dot'
},
{
name: 'man-delete'
},
{
name: 'man-add'
},
{
name: 'man-add-fill'
},
{
name: 'person-delete-fill'
},
{
name: 'info'
},
{
name: 'info-circle'
},
{
name: 'info-circle-fill'
},
{
name: 'minus'
},
{
name: 'minus-circle'
},
{
name: 'minus-circle-fill'
},
{
name: 'mic'
},
{
name: 'mic-off'
},
{
name: 'grid'
},
{
name: 'grid-fill'
},
{
name: 'eye'
},
{
name: 'eye-fill'
},
{
name: 'eye-off'
},
{
name: 'file-text'
},
{
name: 'file-text-fill'
},
{
name: 'edit-pen'
},
{
name: 'edit-pen-fill'
},
{
name: 'email'
},
{
name: 'email-fill'
},
{
name: 'download'
},
{
name: 'checkmark'
},
{
name: 'checkmark-circle'
},
{
name: 'checkmark-circle-fill'
},
{
name: 'clock'
},
{
name: 'clock-fill'
},
{
name: 'close'
},
{
name: 'close-circle'
},
{
name: 'close-circle-fill'
},
{
name: 'calendar'
},
{
name: 'calendar-fill'
},
{
name: 'car'
},
{
name: 'car-fill'
},
{
name: 'bell'
},
{
name: 'bell-fill'
},
{
name: 'bookmark'
},
{
name: 'bookmark-fill'
},
{
name: 'attach'
},
{
name: 'play-right'
},
{
name: 'play-right-fill'
},
{
name: 'play-left'
},
{
name: 'play-left-fill'
},
{
name: 'error'
},
{
name: 'error-circle'
},
{
name: 'error-circle-fill'
},
{
name: 'wifi'
},
{
name: 'wifi-off'
},
{
name: 'skip-back-left'
},
{
name: 'skip-forward-right'
},
{
name: 'search'
},
{
name: 'setting'
},
{
name: 'setting-fill'
},
{
name: 'volume'
},
{
name: 'volume-fill'
},
{
name: 'more-dot-fill'
},
{
name: 'more-circle'
},
{
name: 'more-circle-fill'
},
{
name: 'bag'
},
{
name: 'bag-fill'
},
{
name: 'arrow-upward'
},
{
name: 'arrow-downward'
},
{
name: 'arrow-leftward'
},
{
name: 'arrow-rightward'
},
{
name: 'arrow-up'
},
{
name: 'arrow-down'
},
{
name: 'arrow-left'
},
{
name: 'arrow-right'
},
{
name: 'rmb'
},
{
name: 'rmb-circle'
},
{
name: 'rmb-circle-fill'
},
{
name: 'thumb-up'
},
{
name: 'thumb-up-fill'
},
{
name: 'thumb-down'
},
{
name: 'thumb-down-fill'
},
{
name: 'coupon'
},
{
name: 'coupon-fill'
},
{
name: 'kefu-ermai'
},
{
name: 'server-fill'
},
{
name: 'server-man'
},
{
name: 'scan'
},
{
name: 'warning'
},
{
name: 'warning-fill'
},
{
name: 'google'
},
{
name: 'google-circle-fill'
},
{
name: 'chrome-circle-fill'
},
{
name: 'ie'
},
{
name: 'IE-circle-fill'
},
{
name: 'github-circle-fill'
},
{
name: 'android-fill'
},
{
name: 'android-circle-fill'
},
{
name: 'apple-fill'
},
{
name: 'camera'
},
{
name: 'camera-fill'
},
{
name: 'pushpin'
},
{
name: 'pushpin-fill'
},
{
name: 'minus-square-fill'
},
{
name: 'plus-square-fill'
},
{
name: 'heart'
},
{
name: 'heart-fill'
},
{
name: 'reload'
},
{
name: 'account'
},
{
name: 'account-fill'
},
{
name: 'minus-people-fill'
},
{
name: 'plus-people-fill'
},
{
name: 'integral'
},
{
name: 'integral-fill'
},
{
name: 'zhihu'
},
{
name: 'zhihu-circle-fill'
},
{
name: 'gift'
},
{
name: 'gift-fill'
},
{
name: 'zhifubao'
},
{
name: 'zhifubao-circle-fill'
},
{
name: 'weixin-fill'
},
{
name: 'weixin-circle-fill'
},
{
name: 'twitter'
},
{
name: 'twitter-circle-fill'
},
{
name: 'taobao'
},
{
name: 'taobao-circle-fill'
},
{
name: 'weibo'
},
{
name: 'weibo-circle-fill'
},
{
name: 'qq-fill'
},
{
name: 'qq-circle-fill'
},
{
name: 'moments'
},
{
name: 'moments-circel-fill'
},
{
name: 'qzone'
},
{
name: 'qzone-circle-fill'
},
{
name: 'facebook'
},
{
name: 'facebook-circle-fill'
},
{
name: 'baidu'
},
{
name: 'baidu-circle-fill'
},
{
name: 'zhuanfa'
},
]
};
},
methods: {
selectIcon(name) {
// #ifdef H5
return this.$u.toast('H5暂不支持复制');
// #endif
uni.setClipboardData({
data: name,
success: () => {
}
});
uni.hideToast()
this.$u.toast('图标名称已复制');
}
}
}
</script>
<style scoped lang="scss">
.wrap {
padding: 24rpx;
}
.inner-wrap {
display: flex;
flex-wrap: wrap;
}
.u-icon-item {
display: flex;
flex-direction: column;
align-items: center;
height: 190rpx;
flex: 0 0 33.33333333%;
justify-content: center;
overflow: hidden;
padding: 0 6rpx;
}
.u-icon-name {
color: $u-tips-color;
word-wrap: break-word;
word-break:break-all;
margin-top: 16rpx;
font-size: 26rpx;
padding: 0 14rpx;
// 给定高度是为了图标名超出一行时,进行换行能有更好的效果
height: 26rpx;
}
</style>
<template>
<u-index-list :scrollTop="scrollTop" :index-list="indexList">
<view v-for="(item, index) in list" :key="index">
<u-index-anchor :index="item.letter" />
<view class="list-cell u-border-bottom" v-for="(item1, index) in item.data" :key="index">
{{item1.name}}
</view>
</view>
</u-index-list>
</template>
<script>
import indexList from "@/common/index.list.js";
const letterArr = indexList.list.map(val => {
return val.letter;
})
export default {
data() {
return {
scrollTop: 0,
indexList: letterArr,
list: indexList.list
}
},
onPageScroll(e) {
this.scrollTop = e.scrollTop;
}
}
</script>
<style lang="scss" scoped>
.list-cell {
display: flex;
box-sizing: border-box;
width: 100%;
padding: 10px 24rpx;
overflow: hidden;
color: $u-content-color;
font-size: 14px;
line-height: 24px;
background-color: #fff;
}
</style>
<template>
<view class="u-demo">
<view class="u-demo-wrap">
<view class="u-demo-title">演示效果</view>
<view class="u-demo-area">
<view class="input-wrap">
<input class="input" disabled type="text" :value="input" placeholder="来自键盘的输入内容" />
<u-button :custom-style="{height: '32px'}" :hairLine="false" class="clear-btn" @tap="input = ''">清空</u-button>
</view>
<u-keyboard :mask="mask" ref="uKeyboard" safe-area-inset-bottom @confirm="confirm"
:random="random" :dotEnable="false" :mode="mode"
:confirmBtn="true" :cancelBtn="true" :tooltip="tooltip" v-model="show"
@change="change" @backspace="backspace"></u-keyboard>
</view>
</view>
<view class="u-config-wrap">
<view class="u-config-title u-border-bottom">
参数配置
</view>
<view class="u-config-item">
<view class="u-item-title">键盘开关</view>
<u-subsection vibrateShort :current="show == true ? 0 : 1" :list="['开', '关']" @change="statusChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">键盘类型</view>
<u-subsection vibrateShort :list="['数字键盘', '身份证键盘', '车牌号键盘']" @change="modeChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">打乱顺序</view>
<u-subsection vibrateShort :current="1" :list="['是', '否']" @change="randomChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">上方工具条</view>
<u-subsection vibrateShort :list="['显示', '隐藏']" @change="tooltipChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">是否显示遮罩</view>
<u-subsection vibrateShort :list="['显示', '隐藏']" @change="maskChange"></u-subsection>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
show: false,
input: '',
mode: 'number',
random: false,
tooltip: true,
mask: true,
}
},
methods: {
statusChange(index) {
this.show = index == 0 ? true : false;
},
modeChange(index) {
if(index == 0) this.mode = 'number';
if(index == 1) this.mode = 'card';
if(index == 2) this.mode = 'car';
this.show = true;
},
randomChange(index) {
this.random = index == 0 ? true : false;
this.show = true;
},
tooltipChange(index) {
this.tooltip = index == 0 ? true : false;
this.show = true;
},
maskChange(index) {
this.show = true;
this.mask = !index;
},
// 点击退格键
backspace() {
if(this.input.length) this.input = this.input.substr(0, this.input.length - 1);
},
// 键盘按键发生变化
change(detail) {
this.input += detail;
},
confirm(e) {
}
}
}
</script>
<style lang="scss" scoped>
.input {
border: 1px solid $u-light-color;
border-radius: 4px;
margin-bottom: 20px;
height: 32px;
font-size: 26rpx;
flex: 1;
box-sizing: border-box;
}
.input-wrap {
display: flex;
}
.clear-btn {
margin-left: 10px;
font-size: 28rpx;
}
</style>
<template>
<view class="wrap">
<view class="item-warp">
<view class="item" v-for="(item, index) in list" :key="index">
<u-lazy-load threshold="-450" height="400" img-mode="aspectFill" border-radius="10" :image="item.src" :index="index" @statusChange="statusChange" @clickImg="clickImg"></u-lazy-load>
</view>
</view>
<u-loadmore :status="status" @loadmore="getData"></u-loadmore>
</view>
</template>
<script>
export default {
data() {
return {
list: [],
status: 'loadmore',
data: [{
src: "https://gtd.alicdn.com/sns_logo/i1/TB124_3NXXXXXasXVXXSutbFXXX.jpg_240x240xz.jpg",
},
{
src: "https://gtd.alicdn.com/sns_logo/i7/TB1IWtgQFXXXXcmXFXXSutbFXXX.jpg_240x240xz.jpg",
},
{
src: "https://gtd.alicdn.com/sns_logo/i1/TB1_f_PLXXXXXbVXpXXSutbFXXX.jpg_240x240xz.jpg",
},
{
// 这里会加载失败,显示错误的占位图
src: "error.jpg",
},
{
src: "https://gtd.alicdn.com/sns_logo/i6/TB1SIYrLXXXXXaAXpXXSutbFXXX.jpg_240x240xz.jpg",
},
{
src: "https://gtd.alicdn.com/sns_logo/i1/TB11yxeNVXXXXbwXFXXSutbFXXX.jpg_240x240xz.jpg",
},
{
src: "https://gtd.alicdn.com/sns_logo/i3/TB1ndJiQFXXXXctaXXXSutbFXXX.jpg_240x240xz.jpg",
},
{
src: "https://gtd.alicdn.com/sns_logo/i4/TB1BYGDLpXXXXbuXXXXSutbFXXX.jpg_240x240xz.jpg",
},
{
src: "https://gtd.alicdn.com/sns_logo/i2/TB1_9GoMVXXXXXmaXXXSutbFXXX.jpg_240x240xz.jpg",
},
{
src: "https://gtd.alicdn.com/sns_logo/i2/TB1cSZZNFXXXXaKaXXXSutbFXXX.jpg_240x240xz.jpg",
},
{
// 这里会加载失败,显示错误的占位图
src: "error.jpg",
},
{
src: "https://gtd.alicdn.com/sns_logo/i8/TB1RVS_QpXXXXXBXXXXSutbFXXX.jpg_240x240xz.jpg",
},
{
src: "https://gtd.alicdn.com/sns_logo/i5/TB1xEJiLXXXXXcxaXXXSutbFXXX.jpg_240x240xz.jpg",
},
{
src: "https://gtd.alicdn.com/sns_logo/i6/TB1DSuHJVXXXXXmXXXXwu0bFXXX.png_240x240xz.jpg",
},
{
src: "https://gtd.alicdn.com/sns_logo/i5/TB1aMNyLpXXXXa2XXXXSutbFXXX.jpg_240x240xz.jpg",
},
{
src: "https://gtd.alicdn.com/sns_logo/i8/TB1JRHEQpXXXXXwXVXXSutbFXXX.jpg_240x240xz.jpg",
},
{
src: "https://gtd.alicdn.com/sns_logo/i7/TB1qKEuQpXXXXXYXXXXSutbFXXX.jpg_240x240xz.jpg",
},
{
src: "https://gtd.alicdn.com/sns_logo/i7/TB1TlOfQFXXXXX2XXXXwu0bFXXX.png_240x240xz.jpg",
},
{
src: "https://gtd.alicdn.com/sns_logo/i1/TB1SKu.QpXXXXbDXVXXSutbFXXX.jpg_240x240xz.jpg",
},
{
// 这里会加载失败,显示错误的占位图
src: "error.jpg",
},
{
src: "https://gtd.alicdn.com/sns_logo/i8/TB1um5GQpXXXXbiaXXXSutbFXXX.jpg_240x240xz.jpg",
},
{
src: "https://gtd.alicdn.com/sns_logo/i1/TB1pxCTQpXXXXa2apXXSutbFXXX.jpg_240x240xz.jpg",
},
{
src: "https://gtd.alicdn.com/sns_logo/i6/TB1zksMNVXXXXaRapXXSutbFXXX.jpg_240x240xz.jpg",
},
{
src: "https://gtd.alicdn.com/sns_logo/i4/TB1nbrcOXXXXXXEXpXXSutbFXXX.jpg_240x240xz.jpg",
},
{
src: "https://gtd.alicdn.com/sns_logo/i4/TB1CI_NQpXXXXXaXVXXSutbFXXX.jpg_240x240xz.jpg",
},
{
src: "https://gtd.alicdn.com/sns_logo/i2/TB18vTdQFXXXXXlXpXXwu0bFXXX.png_240x240xz.jpg",
},
{
src: "https://gtd.alicdn.com/sns_logo/i7/TB1doDVQpXXXXcRaXXXSutbFXXX.jpg_240x240xz.jpg",
},
{
src: "https://gtd.alicdn.com/sns_logo/i1/TB17LgBNFXXXXaSXVXXSutbFXXX.jpg_240x240xz.jpg",
},
{
src: "https://gtd.alicdn.com/sns_logo/i6/TB1fVJJQFXXXXcyXpXXSutbFXXX.jpg_240x240xz.jpg",
},
{
src: "https://gtd.alicdn.com/sns_logo/i3/TB1wnBTKFXXXXcQXXXXSutbFXXX.jpg_240x240xz.jpg",
},
{
src: "https://gtd.alicdn.com/sns_logo/i1/TB124_3NXXXXXasXVXXSutbFXXX.jpg_240x240xz.jpg",
},
{
src: "https://gtd.alicdn.com/sns_logo/i7/TB1IWtgQFXXXXcmXFXXSutbFXXX.jpg_240x240xz.jpg",
},
{
src: "https://gtd.alicdn.com/sns_logo/i1/TB1_f_PLXXXXXbVXpXXSutbFXXX.jpg_240x240xz.jpg",
},
{
src: "https://gtd.alicdn.com/sns_logo/i1/TB1DX3hIpXXXXXIaXXXSutbFXXX.jpg_240x240xz.jpg",
},
{
src: "https://gtd.alicdn.com/sns_logo/i6/TB1SIYrLXXXXXaAXpXXSutbFXXX.jpg_240x240xz.jpg",
},
{
src: "https://gtd.alicdn.com/sns_logo/i1/TB11yxeNVXXXXbwXFXXSutbFXXX.jpg_240x240xz.jpg",
},
{
src: "https://gtd.alicdn.com/sns_logo/i3/TB1ndJiQFXXXXctaXXXSutbFXXX.jpg_240x240xz.jpg",
},
{
src: "https://gtd.alicdn.com/sns_logo/i4/TB1BYGDLpXXXXbuXXXXSutbFXXX.jpg_240x240xz.jpg",
},
{
src: "https://gtd.alicdn.com/sns_logo/i2/TB1_9GoMVXXXXXmaXXXSutbFXXX.jpg_240x240xz.jpg",
},
{
src: "https://gtd.alicdn.com/sns_logo/i2/TB1cSZZNFXXXXaKaXXXSutbFXXX.jpg_240x240xz.jpg",
},
{
// 这里会加载失败,显示错误的占位图
src: "error.jpg",
},
{
src: "https://gtd.alicdn.com/sns_logo/i8/TB1RVS_QpXXXXXBXXXXSutbFXXX.jpg_240x240xz.jpg",
},
{
src: "https://gtd.alicdn.com/sns_logo/i5/TB1xEJiLXXXXXcxaXXXSutbFXXX.jpg_240x240xz.jpg",
},
{
src: "https://gtd.alicdn.com/sns_logo/i6/TB1DSuHJVXXXXXmXXXXwu0bFXXX.png_240x240xz.jpg",
},
{
src: "https://gtd.alicdn.com/sns_logo/i5/TB1aMNyLpXXXXa2XXXXSutbFXXX.jpg_240x240xz.jpg",
},
{
src: "https://gtd.alicdn.com/sns_logo/i8/TB1JRHEQpXXXXXwXVXXSutbFXXX.jpg_240x240xz.jpg",
},
{
src: "https://gtd.alicdn.com/sns_logo/i7/TB1qKEuQpXXXXXYXXXXSutbFXXX.jpg_240x240xz.jpg",
},
{
src: "https://gtd.alicdn.com/sns_logo/i7/TB1TlOfQFXXXXX2XXXXwu0bFXXX.png_240x240xz.jpg",
},
{
src: "https://gtd.alicdn.com/sns_logo/i1/TB1SKu.QpXXXXbDXVXXSutbFXXX.jpg_240x240xz.jpg",
},
{
src: "https://gtd.alicdn.com/sns_logo/i2/TB17gJ3OXXXXXcrXpXXSutbFXXX.jpg_240x240xz.jpg",
},
{
src: "https://gtd.alicdn.com/sns_logo/i8/TB1um5GQpXXXXbiaXXXSutbFXXX.jpg_240x240xz.jpg",
},
{
src: "https://gtd.alicdn.com/sns_logo/i1/TB1pxCTQpXXXXa2apXXSutbFXXX.jpg_240x240xz.jpg",
},
{
src: "https://gtd.alicdn.com/sns_logo/i6/TB1zksMNVXXXXaRapXXSutbFXXX.jpg_240x240xz.jpg",
},
{
src: "https://gtd.alicdn.com/sns_logo/i4/TB1nbrcOXXXXXXEXpXXSutbFXXX.jpg_240x240xz.jpg",
},
{
src: "https://gtd.alicdn.com/sns_logo/i4/TB1CI_NQpXXXXXaXVXXSutbFXXX.jpg_240x240xz.jpg",
},
{
src: "https://gtd.alicdn.com/sns_logo/i2/TB18vTdQFXXXXXlXpXXwu0bFXXX.png_240x240xz.jpg",
},
{
src: "https://gtd.alicdn.com/sns_logo/i7/TB1doDVQpXXXXcRaXXXSutbFXXX.jpg_240x240xz.jpg",
},
{
src: "https://gtd.alicdn.com/sns_logo/i1/TB17LgBNFXXXXaSXVXXSutbFXXX.jpg_240x240xz.jpg",
},
{
// 这里会加载失败,显示错误的占位图
src: "error.jpg",
}
]
}
},
onLoad() {
this.getData();
},
onReachBottom() {
this.getData();
},
methods: {
statusChange(status) {
//console.log(status);
},
clickImg(img) {
//console.log(img);
},
getData() {
let index = 0;
this.status = 'loading';
setTimeout(() => {
for(let i = 0; i < 10; i++) {
index = this.$u.random(0, this.data.length - 1);
this.list.push({
src: this.data[index].src
})
}
this.status = 'loadmore';
}, 1500);
}
},
}
</script>
<style lang="scss" scoped>
.wrap {
padding: 30rpx;
display: block;
}
.item-warp {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.item-warp .item {
flex: 0 0 335rpx;
height: 400rpx;
margin-bottom: 20rpx;
border-radius: 10rpx;
overflow: hidden;
}
</style>
<template>
<view class="u-demo">
<view class="u-demo-wrap">
<view class="u-demo-title">演示效果</view>
<view class="u-demo-area">
<u-toast ref="uToast"></u-toast>
<view class="u-no-demo-here">请点击弹出弹窗查看效果</view>
<u-modal v-model="show" :show-cancel-button="true" :show-title="showTitle" :content-slot="contentSlot">
<view class="warp" style="margin: 30rpx;" v-if="content">
<image class="logo" src="https://uviewui.com/common/logo.png" style="width: 220rpx;" mode="widthFix"></image>
</view>
</u-modal>
</view>
</view>
<view class="u-config-wrap">
<view class="u-config-title u-border-bottom">参数配置</view>
<view class="u-config-item">
<view class="u-item-title">状态</view>
<u-subsection vibrateShort :current="current" :list="['显示', '隐藏']" @change="showChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">是否显示标题</view>
<u-subsection vibrateShort current="0" :list="['是', '否']" @change="titleChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">自定义内容</view>
<u-subsection vibrateShort current="1" :list="['是', '否']" @change="contentChange"></u-subsection>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
show: false,
zoom: false,
content: false,
showTitle: true,
contentSlot: false
};
},
computed: {
current() {
return this.show ? 0 : 1;
}
},
methods: {
showChange(index) {
this.show = !index;
},
titleChange(index) {
this.showTitle = !index;
this.show = true;
},
contentChange(index) {
this.contentSlot = !index;
this.content = !index;
this.show = true;
}
}
};
</script>
<style scoped lang="scss">
.warp {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.rect {
width: 120px;
height: 120px;
background-color: #fff;
}
.logo {
height: auto;
}
</style>
<template>
<view class="">
<u-navbar title-color="#fff" back-icon-color="#ffffff" :is-fixed="isFixed" :is-back="isBack" :background="background" :back-text-style="{color: '#fff'}" :title="title" :back-icon-name="backIconName" :back-text="backText">
<view class="slot-wrap" v-if="useSlot">
<view class="search-wrap" v-if="search">
<!-- 如果使用u-search组件,必须要给v-model绑定一个变量 -->
<u-search v-model="keyword" :show-action="showAction" height="56" :action-style="{color: '#fff'}"></u-search>
</view>
<view class="navbar-right" v-if="rightSlot">
<view class="message-box right-item">
<u-icon name="chat" size="38"></u-icon>
<u-badge count="18" size="mini" :offset="[-15, -15]"></u-badge>
</view>
<view class="dot-box right-item">
<u-icon name="calendar-fill" size="38"></u-icon>
<u-badge size="mini" :is-dot="true" :offset="[-6, -6]"></u-badge>
</view>
</view>
<view class="map-wrap" v-if="custom">
<u-icon name="map" color="#ffffff" size="24"></u-icon>
<text class="map-wrap-text">轻舟已过万重山</text>
<u-icon name="arrow-down-fill" color="#ffffff" size="22"></u-icon>
</view>
</view>
</u-navbar>
<view class="u-demo">
<view class="u-demo-wrap">
<view class="u-demo-title">演示效果</view>
<view class="u-demo-area">
<u-toast ref="uToast"></u-toast>
<view class="u-no-demo-here">查看顶部导航栏效果</view>
</view>
</view>
<view class="u-config-wrap">
<view class="u-config-title u-border-bottom">
参数配置
</view>
<view class="u-config-item">
<view class="u-item-title">标题长度</view>
<u-subsection vibrateShort :list="['短', '中', '长']" @change="titleChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">隐藏左侧返回区域</view>
<u-subsection current="1" vibrateShort :list="['是', '否']" @change="backChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">自定义左侧内容</view>
<u-subsection current="1" vibrateShort :list="['是', '否']" @change="leftChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">传入slot</view>
<u-subsection vibrateShort :list="['无', '搜索框', '搜索+按钮', '搜索+图标']" @change="searchChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">完全自定义传入内容</view>
<u-subsection current="1" vibrateShort :list="['是', '否']" @change="customChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">背景色</view>
<u-subsection vibrateShort :list="['渐变', '#39CCCC', '#B471CC', '#001f3f']" @change="bgColorChange"></u-subsection>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: '新闻',
backText: '返回',
backIconName: 'arrow-left',
right: false,
showAction: false,
rightSlot: false,
useSlot: false,
background: {
'background-image': 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
},
isBack: true,
search: false,
custom: false,
isFixed: true,
keyword: ''
}
},
methods: {
titleChange(index) {
this.useSlot = false;
this.title = index == 0 ? '新闻' : index == 1 ? '新闻列表' : '雨打梨花深闭门,忘了青春,误了青春';
},
leftChange(index) {
if(index == 0) {
this.backText = '';
this.backIconName = 'arrow-leftward';
} else {
this.backText = '返回';
this.backIconName = 'arrow-left';
}
},
searchChange(index) {
this.title = null;
this.useSlot = true;
this.search = false;
this.custom = false;
if(index == 0) {
this.title = '新闻';
this.useSlot = false;
} else if(index == 1) {
this.showAction = false;
this.useSlot = true;
this.rightSlot = false;
this.search = true;
} else if(index == 2) {
this.useSlot = true;
this.showAction = true;
this.rightSlot = false;
this.search = true;
} else {
this.useSlot = true;
this.search = true;
this.showAction = false;
this.rightSlot = true;
}
},
backChange(index) {
this.isBack = !!index;
},
bgColorChange(index) {
this.background = {};
if(index == 0) {
this.background = {
'background-image': 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
}
} else {
let color = index == 1 ? '#39CCCC' : index == 2 ? '#B471CC' : '#001f3f';
this.background = {
background: color
}
}
},
customChange(index) {
this.search = false;
this.rightSlot = false;
if(index == 0) {
this.custom = true;
this.title = null;
this.isBack = false;
this.useSlot = true;
} else {
this.useSlot = false;
this.title = '新闻';
this.isBack = true;
}
}
}
}
</script>
<style lang="scss" scoped>
.u-demo {
//height: 200vh;
height: calc(100% - 44px);
height: calc(100% - 44px - constant(safe-area-inset-top));
height: calc(100% - 44px - env(safe-area-inset-top));
}
.wrap {
padding: 24rpx;
}
.navbar-right {
margin-right: 24rpx;
display: flex;
}
.search-wrap {
margin: 0 20rpx;
flex: 1;
}
.right-item {
margin: 0 12rpx;
position: relative;
color: #ffffff;
display: flex;
}
.message-box {
}
.slot-wrap {
display: flex;
align-items: center;
flex: 1;
}
.map-wrap {
display: flex;
align-items: center;
padding: 4px 6px;
background-color: rgba(240,240, 240, 0.35);
color: #fff;
font-size: 22rpx;
border-radius: 100rpx;
margin-left: 30rpx;
}
.map-wrap-text {
padding: 0 6rpx;
}
</style>
<template>
<view class="u-demo">
<view class="u-demo-wrap">
<view class="u-demo-title">演示效果</view>
<view class="u-demo-area">
<text class="no-net-tips">请断开手机的WiFi和移动数据来查看效果</text>
<u-no-network :tips="tips" :image="image"></u-no-network>
</view>
</view>
<view class="u-config-wrap">
<view class="u-config-title u-border-bottom">
参数配置
</view>
<view class="u-config-item">
<view class="u-item-title">自定义提示语</view>
<u-subsection vibrateShort :current="1" :list="['是', '否']" @change="tipsChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">自定义图标</view>
<u-subsection vibrateShort :current="1" :list="['是', '否']" @change="imageChange"></u-subsection>
</view>
</view>
</view>
</template>
<script>
let image = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAEYCAMAAABFglBLAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6M0U3MjVFMzQwNEY1MTFFQUE4MTNDOUEzMTVBREMxQjIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6M0U3MjVFMzUwNEY1MTFFQUE4MTNDOUEzMTVBREMxQjIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDozRTcyNUUzMjA0RjUxMUVBQTgxM0M5QTMxNUFEQzFCMiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDozRTcyNUUzMzA0RjUxMUVBQTgxM0M5QTMxNUFEQzFCMiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PkHIU9QAAAMAUExURdHW2OWiou7u7tve4dnc3/vw8N3g4sPCwvjn5+jo6M7Q0u6+vtyEhPXY2Li+wuikpPXW1uXo6dba3Pbg4Na5u+qurqqyt/HJydjb3fjo6LrAxO7Bwey1td6MjOrs7fbc3OTn6Maytf7+/vz19eqqqrzCxvzz87a8wLO6vuqxsf78/PDFxenr7L/FyNTY26+2u/z09MjMzqy0udnZ2dvb27G4vMjN0O7v8P339+Ll5u3v8NDS1ODj5frt7bC3vP76+u24uOKamtTW2MTIy9zc3N7e3vPQ0OCTk8DGyfDDw9LR0c7S1LussNbY2fPOztLU1cLHyrK6vvji4vrv78bKzPX29/np6crP0vjk5Ozu78bLzuepqczR1MHFyMDEyOq1tfTS0vP09cLIy9DU173Ex8bGxvHy88/U18vO0LK4vM7OzsTKzcPJzPLMzM/T1sbMz8HJy+7FxbW8wNTW18XKzvb3+MjLzczP0d3e3+Dh4r3Dxtna29zd3rK5vdPU1cfM0Prq6uOenuPm58HGyfHz8/ro6Lq/w8nO0bzCxcrKytjZ2uXm5vTU1LvBxbW7v+rp6eefn/39/eLi4u3t7Ozs7Pj4+Pr6+vX19fHx8erq6vPz8+Xl5ff39+fn5/v7+/z8/PLx8fX09Pb29ri4uOTk5PHw8OPj4/Py8ubm5vn5+e3s7Pb19fTz8/f29tfX1+7t7cvQ0+zr6/Ly8u3t7fr5+efm5quzuOvq6vT19uvr6/j5+a61uuy6uvb39/T09Ojn5+jq6621uvn6+t/i5KyzuPn4+Le+wvv6+s3S1fj4+fDw8OHk5vv7/Pr7++Xk5LS7v7y8vObl5fz9/ff4+OTj48DEx8XJy+Hk5euysu/x8re9wfn5+v38/Pv8/Pr6++vt7uLi4+Pi4ubl5uXk5dPV1tbV1fHMzNPX2e7u7ejn6PT19fX19PDw7/b29f39/vnr6+Hh4a+3u+7t7q61uePi48PHyf35+enp6fLz9PPz8qmxtuDg4N/f3/Dv7////////1cfN/UAAAEAdFJOU////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////wBT9wclAAAlqElEQVR42uydCXwUVZrAk5CEJBAQshACCGyjIRwBJR0It6JBGZZBkRtm5PBgFXAXHBghqAMz6LjGTrd9n7lvwn0JQhARxYNxVJTMwcwOM+7uzK6Z3VXcrnTXVr2q6q7urrvfq26c+n4egXTSVfXv993veym4JkklKdoj0IBoogHRgGiiAdGAaKIB0YBoogHRgGiiAdFEA6IBUVuwx+vqet/v1YAkhxwmcNT9gvjnsAYkGcT7eN1TtThe+1TdL2o1IEkg+rrvUV90MF9oQBIqv6ijF4a3d51XA5J4jVVXx3z587ojGpDEm/QwkO9pQJJB2CvksAYk8fJUXT31xZG63ppRTwI5QgcgR35Rd1MDkgxSX1f31P33P1V3i3u936HUyc3edWSsjuEakKRRW3r9kVv+JrRsrwbklpKTnXs+z0wfONOtAUm8rJu55oqfkZ0TOzUgCZS3Zh7s54+S5RqQhNGYMsnPISkakCSiQcjkNzUgasvUDaVsBF1fb9GXd//B0ziliPzjEA2IujLqGRaMST+cawgLNpn4q30aEDV1Va+dYRqzNy00RMoYUmdpQNTzcb8sCtuKH8w9Z4iWLuIbVzQgapmOBedDOO6c0WjgENK2vKwBUUUmvBSiUbrqxwZuOU18d5MGhEe/dI6a2WvIxA0HX1hfvH7V8gUpA9Mz3x/VuVTRLxvwdAhH5aJjBj4hv39QAxIl743ITHm6azBPnOCfVLwlc6pR3upYFbLjvIuDlEUqRYZo38JYS4gVt5rNZhMQO46byksoMeG4w8QIjtvMpJA/wP1EdZ0bKvkitkh555mBA3zSLnBlSFnNnlJvEJJ95ItW3pJAamvtZhy3m/T0g7fhthJGiG+EviYgmEJ/wHFP6GsbnlZSoicoucxmGwHVguPTBz543C9LHky/Jnql1w5KxWGo8KsThsAFYneYMOb5mlnP11ZCrwOPjfgGI8RqsZuZtUOsFmbllFhZP+zEbc8vGcqzMibv7qos3rd7Mg+TrQv2vCVkiLYc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';
export default {
data() {
return {
tips: '哎呀,网络信号丢失',
image: image,
}
},
methods: {
tipsChange(index) {
this.tips = index == 0 ? '人生得意须尽欢' : '哎呀,网络信号丢失';
},
imageChange(index) {
this.image = index == 0 ? 'https://cdn.uviewui.com/uview/no-network/no_network.png' : image;
}
}
}
</script>
<style scoped lang="scss">
.no-net-tips {
color: $u-tips-color;
font-size: 26rpx;
}
</style>
\ No newline at end of file
<template>
<view class="u-demo">
<view class="u-demo-wrap">
<view class="u-demo-title">演示效果</view>
<view class="u-demo-area">
<u-toast ref="uToast"></u-toast>
<u-slider :step="step" :height="height" :block-width="blockWidth"
:active-color="activeColor" :value="30"
:use-slot="useSlot" v-model="value"
:min="min" :max="max"
>
<view class="">
<view class="badge-button" v-if="useSlot">
{{value}}
</view>
</view>
</u-slider>
<view class="u-demo-result-line">
滑块值:{{value}}
</view>
</view>
</view>
<view class="u-config-wrap">
<view class="u-config-title u-border-bottom">参数配置</view>
<view class="u-config-item">
<view class="u-item-title">自定义颜色</view>
<u-subsection vibrateShort :list="['primary', 'warning', 'error', 'success']" @change="typeChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">自定义传入内容</view>
<u-subsection vibrateShort current="1" :list="['是', '否']" @change="slotChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">自定义尺寸</view>
<u-subsection vibrateShort current="1" :list="['是', '否']" @change="sizeChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">步进值</view>
<u-subsection vibrateShort :list="['1', '10', '20']" @change="stepChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">最大最小值</view>
<u-subsection vibrateShort :list="['0-100', '40-80']" @change="minMaxchange"></u-subsection>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
value: 30,
useSlot: false,
setp: 1,
activeColor: '#2979ff',
height: 6,
blockWidth: 30,
step: 1,
min: 0,
max: 100
};
},
onLoad() {
},
computed: {
current() {
return this.show ? 0 : 1;
}
},
methods: {
typeChange(index) {
let type = ['primary', 'warning', 'error', 'success'];
this.activeColor = this.$u.color[type[index]];
},
sizeChange(index) {
if(index == 0) {
this.height = 4;
this.blockWidth = 30;
} else {
this.height = 6;
this.blockWidth = 20;
}
},
stepChange(index) {
let arr = ['1', '10', '20'];
this.step = arr[index];
},
slotChange(index) {
this.useSlot = !index;
},
minMaxchange(index) {
if(index == 0) {
this.min = 0;
this.max = 100;
} else {
this.min = 40;
this.max = 80;
}
}
}
};
</script>
<style scoped lang="scss">
.badge-button {
padding: 4rpx 6rpx;
background-color: $u-type-error;
color: #fff;
border-radius: 10rpx;
font-size: 22rpx;
line-height: 1;
}
</style>
<template>
<view class="u-demo">
<view class="u-demo-wrap">
<view class="u-demo-title">演示效果</view>
<view class="u-demo-area">
<u-toast ref="uToast"></u-toast>
<u-tabs v-if="control" bg-color="#fafafa" :bold="bold" :active-color="activeColor" :list="list"
@change="change" :current="current" :is-scroll="isScroll"></u-tabs>
</view>
</view>
<view class="u-config-wrap">
<view class="u-config-title u-border-bottom">
参数配置
</view>
<view class="u-config-item">
<view class="u-item-title">模式选择</view>
<u-subsection vibrateShort :current="sectionCurrent" :list="['滚动', '非滚动']" @change="modeChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">标签个数(非滚动模式)</view>
<u-subsection vibrateShort :list="['2', '3', '4']" @change="countChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">活动选项字颜色</view>
<u-subsection vibrateShort mode="button" :list="['primary', 'success', 'error', 'warning']" @change="colorChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">字体加粗</view>
<u-subsection vibrateShort mode="button" :list="['是', '否']" @change="boldChange"></u-subsection>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
list: [],
data: [{
name: '关注'
}, {
name: '推荐'
}, {
name: '电影'
},{
name: '电视剧'
},{
name: '小视频'
}, {
name: '游戏'
}, {
name: '校园'
},{
name: '影视'
},{
name: '音乐'
}],
current: 0,
sectionCurrent: 0,
isScroll: true,
tabCountIndex: 0,
activeColor: this.$u.color['primary'],
bold: true,
control: true
}
},
onLoad() {
this.list = this.data;
},
methods: {
countChange(index) {
this.sectionCurrent = 1;
if(index == 0) {
this.list = [];
this.list.push(this.data[0]);
this.list.push(this.data[1]);
} else if(index == 1) {
this.list = [];
this.list.push(this.data[0]);
this.list.push(this.data[1]);
this.list.push(this.data[2]);
} else {
this.list = [];
this.list.push(this.data[0]);
this.list.push(this.data[1]);
this.list.push(this.data[2]);
this.list.push(this.data[3]);
}
this.tabCountIndex = index;
this.isScroll = false;
},
change(index) {
this.current = index;
},
modeChange(index) {
this.control = false;
this.current = 0;
if(index == 0) {
this.isScroll = true;
this.list = this.data;
} else {
this.isScroll = false;
this.countChange(this.tabCountIndex);
}
this.$nextTick(() => {
this.control = true;
})
},
colorChange(e) {
let color = 'primary';
switch(e) {
case 0:
color = 'primary';break;
case 1:
color = 'success';break;
case 2:
color = 'error';break;
case 3:
color = 'warning';break;
}
this.activeColor = this.$u.color[color];
},
boldChange(e) {
switch(e) {
case 0:
this.bold = true;break;
case 1:
this.bold = false;break;
}
}
}
}
</script>
<style lang="scss" scoped>
.u-config-wrap {
}
</style>
<template>
<view class="u-demo">
<view class="u-demo-wrap">
<view class="u-demo-title">演示效果</view>
<view class="u-demo-area">
<u-toast ref="uToast"></u-toast>
<u-tag :text="text" :type="type" :shape="shape" :closeable="closeable" :mode="mode"
@close="close" @click="click" :show="show" :size="size"/>
</view>
</view>
<view class="u-config-wrap">
<view class="u-config-title u-border-bottom">
参数配置
</view>
<view class="u-config-item">
<view class="u-item-title">模式选择</view>
<u-subsection vibrateShort :list="['light', 'dark', 'plain']" @change="modeChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">显示内容</view>
<u-subsection vibrateShort :list="['蒹葭苍苍', '白露为霜', '在水一方']" @change="textChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">主题选择</view>
<u-subsection vibrateShort current="2" :list="['primary', 'success', 'error', 'warning', 'info']" @change="typeChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">形状</view>
<u-subsection vibrateShort :list="['square', 'circle', 'circleLeft', 'circleRight']" @change="shapeChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">尺寸</view>
<u-subsection vibrateShort :list="['default', 'mini']" @change="sizeChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">关闭图标</view>
<u-subsection vibrateShort :list="['是', '否']" @change="closeableChange"></u-subsection>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
text: '蒹葭苍苍',
mode: 'light',
type: 'error',
size: 'default',
shape: 'square',
closeable: true,
show: true
}
},
methods: {
modeChange(index) {
this.mode = index == 0 ? 'light' : index == 1 ? 'dark' : 'plain';
},
textChange(index) {
this.text = index == 0 ? '蒹葭苍苍' : index == 1 ? '白露为霜' : '在水一方';
},
typeChange(index) {
this.type = index == 0 ? 'primary' : index == 1 ? 'success' : index == 2 ? 'error' : index == 3 ? 'warning' : 'info';
},
shapeChange(index) {
this.shape = index == 0 ? 'square' : index == 1 ? 'circle' : index == 2 ? 'circleLeft' : 'circleRight';
},
sizeChange(index) {
this.size = index == 0 ? 'default' : 'mini';
},
closeableChange(index) {
this.closeable = index == 0 ? true : false;
},
click(index) {
this.$refs.uToast.show({
title: `第${index + 1}个标签被点击`,
type: 'success'
})
},
close(index) {
this.$refs.uToast.show({
title: `关闭图标被点击`,
type: 'success'
})
},
}
}
</script>
<style lang="scss" scoped>
.u-demo {}
</style>
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
<template>
</template>
<script>
</script>
<style>
</style>
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
<template>
<view class="u-demo">
<view class="u-demo-wrap">
<view class="u-demo-title">演示效果</view>
<view class="u-demo-area">
<view class="u-no-demo-here">
只对各家小程序有效,点击右上角的"胶囊",即可弹出分享菜单
</view>
</view>
</view>
</view>
</template>
<script>
</script>
<style lang="scss" scoped>
.u-demo {}
</style>
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment