Commit ba8b6ba8 authored by 王博文's avatar 王博文

删除修改信息。同步主分支

parent 28bd752f
/unpackage/dist/*
/node_modules/*
<script>
export default {
// 此处globalData为了演示其作用,不是uView框架的一部分
globalData: {
username: '竹青'
},
async onLaunch() {
this.$u.http.setConfig({
baseUrl: 'https://api.youzixy.com',
// 如果将此值设置为true,拦截回调中将会返回服务端返回的所有数据response,而不是response.data
// 设置为true后,就需要在this.$u.http.interceptor.response进行多一次的判断,请打印查看具体值
// originalData: true,
});
// 请求拦截,配置Token等参数
this.$u.http.interceptor.request = (config) => {
config.header.Token = 'xxxxxx';
return config;
}
// 响应拦截,判断状态码是否通过
this.$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;
}
},
}
</script>
<style>
/*每个页面公共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
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="http://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>
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";
Vue.use(uView);
// 此处为演示vuex使用,非uView的功能部分
import store from '@/store';
// 引入uView提供的对vuex的简写法文件
let vuexStore = require("@/store/$u.mixin.js");
Vue.mixin(vuexStore);
const app = new Vue({
store,
...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\"/>"
]
},
"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
}
}
}
}
<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>
.wrap {
padding: 24rpx;
}
</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/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="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: '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" :tips="true"
: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,
}
},
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="auto" img-mode="widthFix" 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-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 :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,
}
},
onLoad() {
},
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-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
<template>
<view class="content u-skeleton">
<view class="bg-white padding-10 banner u-skeleton-fillet">
<u-swiper :list="bannerList" :effect3d="true" @click='bannerClick' :title='true'></u-swiper>
</view>
<view class="bg-white radius-bbg padding-5 nav flex flex-row flex-nowrap align-center">
<view v-for="(item, index) in gridIconList" @click="gridClick(item)" :key="index" class="u-skeleton-fillet padding-sm flex-1 flex flex-column align-center">
<image :src="'/static/index/'+item+'.png'" style="width: 80rpx;height: 80rpx;"></image>
<text class="grid-text">{{ tabs[index].name }}</text>
</view>
</view>
<view class="tab bg-gray ">
<u-tabs-swiper class='u-skeleton-fillet' bg-color='#f1f1f1' :isScroll="false" ref="uTabs" activeColor="#A87DFF" :list="tabs" :current="current" @change="tabsChange" :isScrool="false" swiperWidth="750"></u-tabs-swiper>
</view>
<swiper class="padding-10 bg-white radius-bbg" :style="{height: swiperHeight}" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
<swiper-item v-for="(item, index) in tabs" :key="index" >
<scroll-view scroll-y :style="{height: swiperHeight,width: '100%'}" :scroll-top="scrollTop" @scroll="scroll" @scrolltolower="onreachBottom(index)">
<view v-for="(item1,index1) in swiperData[0]" @click="dataClick(item1.id)" :key='index1' :class="index1==0?'margin-top-sm':''" class="flex flex-row align-center padding-5">
<view class="flex-1 u-skeleton-fillet">
<image :src="'/static/source/'+item1.img+'.png'" style="width: 100rpx;height: 100rpx;"></image>
</view>
<view class="u-skeleton-rect flex-9 margin-left-sm flex flex-column justify-start justify-between">
<view class="flex-7 text-format-2 text-black">{{item1.title}}</view>
<view class="flex-3 flex flex-row align-center justify-between padding-top-sm margin-bottom-sm">
<view class="flex-7">{{item1.typename}}</view>
<view class="flex-3">{{item1.time*1000 | date}}</view>
</view>
<view v-if='(index1+1)<swiperData[0].length' class="zise-line"></view>
</view>
</view>
</scroll-view>
</swiper-item>
</swiper>
<u-top-tips ref="uTips"></u-top-tips>
<u-skeleton :loading="loading" :animation="true" bgColor="#f1f1f1"></u-skeleton>
<u-no-network></u-no-network>
</view>
</template>
<script>
export default {
data() {
return {
bannerList: [
{
id:1,type:'forum',
image: '1',
title: '蒹葭苍苍,白露为霜。所谓伊人,在水一方'
},
{
id:2,type:'book',
image: '2',
title: '溯洄从之,道阻且长。溯游从之,宛在水中央'
},
{
id:3,type:'video',
image: '3',
title: '蒹葭萋萋,白露未晞。所谓伊人,在水之湄'
},
{
id:4,type:'cartoon',
image: '4',
title: '蒹葭萋萋,白露未晞。所谓伊人,在水之湄'
},
{
id:5,type:'audio',
image: '5',
title: '蒹葭萋萋,白露未晞。所谓伊人,在水之湄'
}
],
gridIconList: ['forum', 'book', 'video', 'cartoon', 'audio'],
tabs: [{name: '论坛'}, {name: '小说'}, {name: '视频'}, {name: '漫画'}, {name: '音频'}],
current: 0,
swiperCurrent: 0,
dx: 0,
swiperHeight:'800rpx',
scrollTop: 0,
old: {
scrollTop: 0
},
loading:true,
swiperData:[
[
{
title:'蒹葭苍苍,白露为霜。所谓伊人,在水一方',
typename:'蒹葭苍苍',
img:1,
time:1586758367
},{
title:'蒹葭苍苍,白露为霜。所谓伊人,在水一方',
typename:'蒹葭苍苍',
img:2,
time:1586758367
},{
title:'蒹葭苍苍,白露为霜。所谓伊人,在水一方',
typename:'蒹葭苍苍',
img:3,
time:1586758367
},{
title:'蒹葭苍苍,白露为霜。所谓伊人,在水一方',
typename:'蒹葭苍苍',
img:4,
time:1586758367
},{
title:'蒹葭苍苍,白露为霜。所谓伊人,在水一方',
typename:'蒹葭苍苍',
img:5,
time:1586758367
},{
title:'蒹葭苍苍,白露为霜。所谓伊人,在水一方',
typename:'蒹葭苍苍',
img:6,
time:1586758367
},{
title:'蒹葭苍苍,白露为霜。所谓伊人,在水一方',
typename:'蒹葭苍苍',
img:1,
time:1586758367
},{
title:'蒹葭苍苍,白露为霜。所谓伊人,在水一方',
typename:'蒹葭苍苍',
img:2,
time:1586758367
},{
title:'蒹葭苍苍,白露为霜。所谓伊人,在水一方',
typename:'蒹葭苍苍',
img:2,
time:1586758367
},{
title:'蒹葭苍苍,白露为霜。所谓伊人,在水一方',
typename:'蒹葭苍苍',
img:2,
time:1586758367
},{
title:'蒹葭苍苍,白露为霜。所谓伊人,在水一方',
typename:'蒹葭苍苍',
img:2,
time:1586758367
},{
title:'蒹葭苍苍,白露为霜。所谓伊人,在水一方',
typename:'蒹葭苍苍',
img:2,
time:1586758367
},{
title:'蒹葭苍苍,白露为霜。所谓伊人,在水一方',
typename:'蒹葭苍苍',
img:2,
time:1586758367
},
]
],
}
},
async onLoad() {
setTimeout(()=>{
this.loading = false;
},2000)
},
onReady() {
this.getSwiperHeight();
},
methods: {
async getSwiperHeight(){
let windowHeight = this.$until.height(1)
let banner = await this.$u.getRect('.banner');
let nav = await this.$u.getRect('.nav');
let tab = await this.$u.getRect('.tab');
this.swiperHeight = (windowHeight-banner.height-nav.height-tab.height)+'px'
},
bannerClick(index) {
this.$refs.uTips.show({
title: `点击了`+this.bannerList[index].id+',类型为'+this.bannerList[index].type,
type: 'success',
})
},
gridClick(index) {
switch(index){
case 'forum':
this.$u.route('/pages/forum/index');
break;
default:
this.$refs.uTips.show({
title: `点击了${index}按钮`,
type: 'success',
})
}
},
tabsChange(index) {
this.swiperCurrent = index;
this.scrollTop = this.old.scrollTop
this.$nextTick(()=>{
this.scrollTop = 0
});
},
// swiper-item左右移动,通知tabs的滑块跟随移动
transition(e) {
let dx = e.detail.dx;
this.$refs.uTabs.setDx(dx);
},
// 由于swiper的内部机制问题,快速切换swiper不会触发dx的连续变化,需要在结束时重置状态
// swiper滑动结束,分别设置tabs和swiper的状态
animationfinish(e) {
let current = e.detail.current;
this.$refs.uTabs.setFinishCurrent(current);
this.swiperCurrent = current;
this.current = current;
this.scrollTop = this.old.scrollTop
this.$nextTick(()=>{
this.scrollTop = 0
});
},
// scroll-view到底部加载更多
onreachBottom(index) {
this.$refs.uTips.show({
title: `在${index}触发触底刷新`,
type: 'success',
})
},
scroll(e) {
this.old.scrollTop = e.detail.scrollTop
},
}
}
</script>
<style scoped>
.grid-text {
color: #A87DFF;
font-size: 28rpx;
margin-top: 6rpx;
}
.grid-text {
font-size: 28rpx;
margin-top: 4rpx;
}
</style>
<template>
<view class="wrap">
<u-time-line>
<u-time-line-item nodeTop="2">
<template v-slot:node>
<view class="u-node" style="background: #19be6b;">
<u-icon name="pushpin-fill" color="#fff" :size="24"></u-icon>
</view>
</template>
<template v-slot:content>
<view>
<view class="u-order-title">待取件</view>
<view class="u-order-desc">[自提柜]您的快件已放在楼下侧门,直走前方53.6米,左拐约10步,再右拐直走,见一红灯笼停下,叩门三下,喊“芝麻开门”即可。</view>
<view class="u-order-time">2019-05-08 12:12</view>
</view>
</template>
</u-time-line-item>
<u-time-line-item nodeTop="2">
<template v-slot:node>
<view class="u-node">
<u-icon name="account-fill" color="#fff" :size="24"></u-icon>
</view>
</template>
<template v-slot:content>
<view>
<view class="u-order-title unacive">派送中</view>
<view class="u-order-desc">【深圳市】快件已到达目的地,派件员为国产锦衣卫007号,电话:<text class="tel">13833882438</text>,请留意快递信息</view>
<view class="u-order-time">2019-05-08 06:03</view>
</view>
</template>
</u-time-line-item>
<u-time-line-item nodeTop="2">
<template v-slot:node>
<view class="u-node">
<u-icon name="car-fill" color="#fff" :size="24"></u-icon>
</view>
</template>
<template v-slot:content>
<view>
<view class="u-order-title unacive">运输中</view>
<view class="u-order-desc">【深圳市】快递已到达 深圳固戍一部</view>
<view class="u-order-time">2019-05-07 08:05</view>
</view>
</template>
</u-time-line-item>
<u-time-line-item>
<template v-slot:content>
<view>
<view class="u-order-desc">【深圳市】快件已从深圳运转中心发出,正在发往深圳宝安一部</view>
<view class="u-order-time">2019-12-06 22:30</view>
</view>
</template>
</u-time-line-item>
<u-time-line-item>
<template v-slot:content>
<view>
<view class="u-order-desc">【深圳市】快件已到达 深圳运转中心</view>
<view class="u-order-time">2019-12-04 16:42</view>
</view>
</template>
</u-time-line-item>
<u-time-line-item>
<template v-slot:content>
<view>
<view class="u-order-desc">【郑州市】快件已从郑州运转中心出发,正在发往深圳运转中心</view>
<view class="u-order-time">2019-12-02 12:55</view>
</view>
</template>
</u-time-line-item>
<u-time-line-item>
<template v-slot:content>
<view>
<view class="u-order-desc">【郑州市】快件已到达 郑州运转中心</view>
<view class="u-order-time">2019-12-02 08:23</view>
</view>
</template>
</u-time-line-item>
<u-time-line-item nodeTop="0">
<template v-slot:node>
<view class="u-node">
<u-icon name="file-text-fill" color="#fff" :size="24"></u-icon>
</view>
</template>
<template v-slot:content>
<view>
<view class="u-order-desc">您购买的商品【尚方宝剑,先斩后奏】,经由北京军区仓库发货,国内快递承运人【中南海保镖】。</view>
<view class="u-order-time">2019-12-01 07:00</view>
</view>
</template>
</u-time-line-item>
</u-time-line>
</view>
</template>
<script>
export default {
data() {
return {
}
}
}
</script>
<style lang="scss" scoped>
.wrap {
padding: 24rpx 24rpx 24rpx 40rpx;
}
.u-node {
width: 44rpx;
height: 44rpx;
border-radius: 100rpx;
display: flex;
justify-content: center;
align-items: center;
background: #d0d0d0;
}
.u-order-title {
color: #333333;
font-weight: bold;
font-size: 32rpx;
}
.u-order-title.unacive {
color: rgb(150, 150, 150);
}
.u-order-desc {
color: rgb(150, 150, 150);
font-size: 28rpx;
margin-bottom: 6rpx;
}
.u-order-time {
color: rgb(200, 200, 200);
font-size: 26rpx;
}
.tel {
color: $u-type-primary;
}
</style>
<template>
<view class="u-demo">
<view class="u-demo-wrap">
<view class="u-demo-title">演示效果</view>
<view class="u-demo-area">
<u-toast :type="type" ref="uToast"></u-toast>
<text class="no-mode-here">见弹出toast</text>
</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="4" :list="['primary', 'success', 'error', 'warning', 'default']" @change="typeChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">结束后自动跳转</view>
<u-subsection vibrateShort current="1" :list="['是', '否']" @change="urlChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">位置</view>
<u-subsection vibrateShort current="1" :list="['顶部', '中部', '底部']" @change="postionChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">显示图标</view>
<u-subsection vibrateShort :list="['是', '否']" @change="iconChange"></u-subsection>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
type: 'success',
title: '桃花潭水深千尺',
icon: true,
postion: 'center',
url: '',
}
},
methods: {
typeChange(index) {
this.type = index == 0 ? 'primary' : index == 1 ? 'success' : index == 2 ? 'error' : index == 3 ? 'warning' : 'default';
this.show();
},
postionChange(index) {
this.postion = index == 0 ? 'top' : index == 1 ? 'center' : 'bottom';
this.show();
},
iconChange(index) {
this.icon = index == 0 ? true : false;
this.show();
},
urlChange(index) {
this.url = index == 0 ? '/pages/components/button/index' : '';
this.show();
},
show() {
this.$refs.uToast.show({
title: this.title,
postion: this.postion,
type: this.type,
icon: this.icon,
url: this.url,
});
},
hide() {
this.$refs.uToast.hide();
}
}
}
</script>
<style lang="scss" scoped>
.no-mode-here {
color: $u-tips-color;
font-size: 28rpx;
}
</style>
<template>
<view class="u-demo">
<view class="u-demo-wrap">
<view class="u-demo-title">演示效果</view>
<view class="u-demo-area">
<u-top-tips ref="uTips"></u-top-tips>
<text class="u-no-demo-here">点击参数配置查看效果</text>
</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', 'success', 'error', 'warning', 'info']" @change="typeChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">显示时间</view>
<u-subsection vibrateShort current="1" :list="['长', '正常', '短']" @change="durationChange"></u-subsection>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
duration: 2000,
title: '忽如一夜春风来,千树万树梨花开',
type: 'primary'
}
},
methods: {
showTips() {
this.$refs.uTips.show({
duration: this.duration,
title: this.title,
type: this.type
});
},
typeChange(index) {
this.type = index == 0 ? 'primary' : index == 1 ? 'success' : index == 2 ? 'error' : index == 3 ? 'warning' : 'info';
this.showTips();
},
durationChange(index) {
this.duration = index == 0 ? 4000 : index == 1 ? 2000 : 500;
this.showTips();
}
}
}
</script>
<style lang="scss" scoped>
.u-demo {}
</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-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode"
@change="codeChange" :startText="startText" :changeText="changeText"
:endText="endText"></u-verification-code>
<u-button @tap="getCode">{{tips}}</u-button>
<u-button :custom-style="{marginTop: '30rpx'}" @tap="reset" style="margin-top: 30rpx;">重置</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="0" :list="['5s', '10s', '60s']" @change="secondsChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">自定义提示语</view>
<u-subsection vibrateShort :current="1" :list="['是', '否']" @change="textChange"></u-subsection>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
tips: '',
seconds: 5,
refCode: null,
startText: '获取验证码',
changeText: 'X秒重新获取',
endText: '重新获取'
}
},
onReady() {
// 注意这里为错误示例,目前微信小程序最新稳定版开发工具如此
// 赋值会报错,很诡异,其他端无此问题
// this.refCode = this.$refs.uCode;
},
methods: {
codeChange(text) {
this.tips = text;
},
getCode() {
if(this.$refs.uCode.canGetCode) {
// 模拟向后端请求验证码
uni.showLoading({
title: '正在获取验证码'
})
setTimeout(() => {
uni.hideLoading();
// 这里此提示会被this.start()方法中的提示覆盖
this.$u.toast('验证码已发送');
// 通知验证码组件内部开始倒计时
this.$refs.uCode.start();
}, 2000);
} else {
this.$u.toast('倒计时结束后再发送');
}
},
secondsChange(index) {
this.seconds = index == 0 ? 5 : index == 1 ? 10 : 60;
},
textChange(index) {
if(index == 0) {
this.startText = '点一下获取',
this.changeText = '重新获取Xs',
this.endText = '再次获取'
} else {
this.startText = '获取验证码',
this.changeText = 'X秒重新获取',
this.endText = '重新获取'
}
},
end() {
this.$u.toast('倒计时结束');
},
start() {
this.$u.toast('倒计时开始');
},
reset() {
this.$refs.uCode.reset();
}
}
}
</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-checkbox-group :size="size" :max="max" @change="checkboxGroupChange" :activeColor="activeColor">
<u-checkbox @change="checkboxChange"
v-model="item.checked" v-for="(item, index) in list"
:key="index" :name="item.name"
:shape="shape" :disabled="item.disabled"
>{{item.name}}</u-checkbox>
</u-checkbox-group>
</view>
<view class="u-demo-result-line">
{{result.length ? `选中了"${getResult}"` : '请选择'}}
</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="shapeChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">整体大小(单位rpx)</view>
<u-subsection vibrateShort current="1" :list="['30', '40', '50']" @change="sizeChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">激活颜色</view>
<u-subsection vibrateShort :list="['primary', 'error', 'warning', 'success', 'info']" @change="activeColorChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">默认选中第一个</view>
<u-subsection vibrateShort current="1" :list="['是', '否']" @change="defaultChooseChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">最大选择数量</view>
<u-subsection vibrateShort current="2" :list="['1', '2', '3']" @change="maxChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">禁用第一个</view>
<u-subsection vibrateShort current="1" :list="['是', '否']" @change="disabledChange"></u-subsection>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
list: [
{
name: 'apple',
checked: false,
disabled: false
},
{
name: 'banner',
checked: false,
disabled: false
},
{
name: 'orange',
checked: false,
disabled: false
}
],
disabled: false,
checked: true,
result: [],
shape: 'square',
max: 3,
activeColor: '#2979ff',
size: 40
}
},
computed: {
getResult() {
return this.result.join(",");
}
},
methods: {
shapeChange(index) {
this.shape = index == 0 ? 'square' : 'circle';
},
sizeChange(index) {
this.size = index == 0 ? 30 : index == 1 ? 40 : 50;
},
defaultChooseChange(index) {
// 特别处理对第一个选的选中的情况,涉及到提示语,选中状态等
// 实际开发中不会存在这些情况,只是演示用
if(index == 0) {
this.list[0].checked = true;
this.result = [this.list[0].name];
} else {
this.list[0].checked = false;
this.result.splice(this.result.indexOf(this.list[0].name), 1);
}
},
maxChange(index) {
this.max = index + 1;
},
disabledChange(index) {
if(index == 0) {
this.list[0].disabled = true;
} else {
this.list[0].disabled = false;
}
},
activeColorChange(index) {
// 如果用户尚未勾选任何checkbox,切换颜色时,默认选中第一个让用户看到效果,因为勾选了才有效果
if(!this.result.length) this.list[0].checked = true;
let theme = index == 0 ? 'primary' : index == 1 ? 'error' : index == 2 ? 'warning' : index == 3 ? 'success' : 'info';
this.activeColor = this.$u.color[theme];
},
// 选中某个复选框时,由checkbox时触发
checkboxChange(e) {
// console.log(e);
},
// 选中任一checkbox时,由checkbox-group触发
checkboxGroupChange(e) {
this.result = e;
// console.log(this.result);
}
}
}
</script>
<style scoped lang="scss">
.u-demo {}
</style>
<template>
<view class="u-demo">
<view class="u-demo-wrap">
<view class="u-demo-title">演示效果</view>
<view class="u-demo-area">
<u-divider :type="type" :borderColor="borderColor" :bg-color="bgColor" @click="click"
:half-width="halfWidth" :color="color" :font-size="fontSize">{{text}}</u-divider>
</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="textChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">单边线宽</view>
<u-subsection vibrateShort current="1" :list="['50', '150', '250']" @change="halfWidthChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">横线颜色</view>
<u-subsection vibrateShort :list="['#dcdfe6', 'primary', 'error', 'warning', 'success']" @change="borderColorChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">内容样式</view>
<u-subsection vibrateShort :list="['默认', '自定义']" @change="contentChange"></u-subsection>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
text: '没有更多了',
bgColor: '#fafafa',
halfWidth: 150,
borderColor: '#dcdfe6',
type: 'primary',
color: '#909399',
fontSize: '26'
}
},
methods: {
textChange(index) {
this.text = index == 0 ? '没有更多了' : '到底了';
},
halfWidthChange(index) {
this.halfWidth = index == 0 ? 50 : index == 1 ? 150 : 250;
},
borderColorChange(index) {
if(index == 0) {
this.borderColor = '#dcdfe6';
} else {
// 因为border-color参数优先级高于type,要让type起作用,就需要设置border-color为空
this.borderColor = '';
this.type = index == 1 ? 'primary' : index == 2 ? 'error' : index == 3 ? 'warning' : 'success';
}
},
contentChange(index) {
if(index == 0) {
this.color = '#909399';
this.fontSize = 26;
} else {
this.color = this.$u.color['primary'];
this.fontSize = 30;
}
},
click() {
console.log('click');
}
}
}
</script>
<style scoped lang="scss">
.u-demo {}
</style>
<template>
<view class="u-demo">
<view class="u-demo-wrap">
<view class="u-demo-title">演示效果</view>
<view class="u-demo-area">
<u-loading :mode="mode" :show="show" :color="color" :size="size"></u-loading>
</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 :list="['default', 'primary', 'error', 'warning', 'success']" @change="colorChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">尺寸(单位rpx)</view>
<u-subsection vibrateShort current="1" :list="['28', '34', '40']" @change="sizeChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">是否显示</view>
<u-subsection vibrateShort current="1" :list="['否', '是']" @change="showChange"></u-subsection>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
mode: 'circle',
color: '#c7c7c7',
size: '34',
show: true
}
},
methods: {
modeChange(index) {
this.mode = index == 0 ? 'circle' : 'flower';
},
colorChange(index) {
if(index == 0) {
this.color = '#c7c7c7';
} else {
let color = index == 1 ? 'primary' : index == 2 ? 'error' : index == 3 ? 'warning' : 'success';
this.color = this.$u.color[color];
}
},
sizeChange(index) {
this.size = index == 0 ? '28' : index == 1 ? '34' : '40';
},
showChange(index) {
// 两个!!可以把0变成false,1变成true
this.show = !!index;
},
// 选中某个复选框时,由checkbox时触发
checkboxChange(e) {
//console.log(e);
},
// 选中任一checkbox时,由checkbox-group触发
checkboxGroupChange(e) {
this.result = e;
// console.log(this.result);
}
}
}
</script>
<style scoped lang="scss">
.u-demo {}
</style>
<template>
<view class="u-demo">
<view class="u-demo-wrap">
<view class="u-demo-title">演示效果</view>
<view class="u-demo-area">
<u-toast :type="type" ref="uToast"></u-toast>
<u-notice-bar :autoplay="autoplay" :playState="playState" :speed="speed" @getMore="getMore"
:mode="mode" @end="end" @close="close" @click="click" :show="show" :type="type" :list="list"
:moreIcon="moreIcon" :volumeIcon="volumeIcon" :duration="duration" :isCircular="isCircular"></u-notice-bar>
</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="3" :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 :current="current" :list="['水平', '垂直']" @change="modeChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">是否衔接(水平模式有效)</view>
<u-subsection vibrateShort :list="['是', '否']" @change="isCircularChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">状态</view>
<u-subsection vibrateShort :list="['播放', '暂停']" @change="playStateChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">速度</view>
<u-subsection vibrateShort :current="1" :list="['慢', '正常', '快']" @change="speedChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">图标</view>
<u-subsection vibrateShort :list="['显示', '隐藏']" @change="iconChange"></u-subsection>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
show: true,
autoplay: false,
type: 'warning',
list: [
'锦瑟无端五十弦,一弦一柱思华年',
'庄生晓梦迷蝴蝶,望帝春心托杜鹃',
'沧海月明珠有泪,蓝田日暖玉生烟'
],
mode: 'horizontal',
playState: 'play',
speed: 160,
duration: 2000,
moreIcon: true,
volumeIcon: true,
isCircular: true,
current: 0
}
},
methods: {
typeChange(index) {
this.type = index == 0 ? 'primary' : index == 1 ? 'success' : index == 2 ? 'error' : index == 3 ? 'warning' : 'info';
},
modeChange(index) {
this.current = index;
this.mode = index == 0 ? 'horizontal' : 'vertical';
},
playStateChange(index) {
this.playState = index == 0 ? 'play' : 'paused';
},
speedChange(index) {
if(index == 0) {
this.$nextTick(() => {
this.speed = 50;
this.duration = 6000;
})
} else if(index == 1) {
this.$nextTick(() => {
this.speed = 160;
this.duration = 2000;
})
} else {
this.$nextTick(() => {
this.speed = 350;
this.duration = 400;
})
}
},
iconChange(index) {
if(index == 0) {
this.moreIcon = true;
this.volumeIcon = true;
} else {
this.moreIcon = false;
this.volumeIcon = false;
}
},
isCircularChange(index) {
this.isCircular = index == 0 ? true : false;
this.current = 0;
this.mode = 'horizontal';
},
close() {
this.toast(`点击了关闭图标`);
},
click(index) {
this.toast(`点击了第${index + 1}条消息`);
},
getMore() {
this.toast(`点击了更多图标`);
},
toast(title) {
this.$refs.uToast.show({
title: title,
type: 'warning'
})
},
end() {
// console.log('end');
}
}
}
</script>
<style lang="scss" scoped>
.item {
margin-top: 30px;
}
</style>
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">
<u-read-more :toggle="toggle" :show-height="showHeight">
<rich-text :nodes="content"></rich-text>
</u-read-more>
</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="['100', '200', '400']" @change="showHeightChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">展开后可关闭</view>
<u-subsection vibrateShort current="1" :list="['是', '否']" @change="toggleChange"></u-subsection>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
content: `浔阳江头夜送客,枫叶荻花秋瑟瑟。主人下马客在船,举酒欲饮无管弦。醉不成欢惨将别,别时茫茫江浸月。
忽闻水上琵琶声,主人忘归客不发。寻声暗问弹者谁,琵琶声停欲语迟。移船相近邀相见,添酒回灯重开宴。千呼万唤始出来,犹抱琵琶半遮面。转轴拨弦三两声,未成曲调先有情。弦弦掩抑声声思,似诉平生不得志。低眉信手续续弹,说尽心中无限事。轻拢慢捻抹复挑,初为《霓裳》后《六幺》。大弦嘈嘈如急雨,小弦切切如私语。嘈嘈切切错杂弹,大珠小珠落玉盘。间关莺语花底滑,幽咽泉流冰下难。冰泉冷涩弦凝绝,凝绝不通声暂歇。别有幽愁暗恨生,此时无声胜有声。银瓶乍破水浆迸,铁骑突出刀枪鸣。曲终收拨当心画,四弦一声如裂帛。东船西舫悄无言,唯见江心秋月白。
沉吟放拨插弦中,整顿衣裳起敛容。自言本是京城女,家在虾蟆陵下住。十三学得琵琶成,名属教坊第一部。曲罢曾教善才服,妆成每被秋娘妒。五陵年少争缠头,一曲红绡不知数。钿头银篦击节碎,血色罗裙翻酒污。今年欢笑复明年,秋月春风等闲度。弟走从军阿姨死,暮去朝来颜色故。门前冷落鞍马稀,老大嫁作商人妇。商人重利轻别离,前月浮梁买茶去。去来江口守空船,绕船月明江水寒。夜深忽梦少年事,梦啼妆泪红阑干。
我闻琵琶已叹息,又闻此语重唧唧。同是天涯沦落人,相逢何必曾相识!我从去年辞帝京,谪居卧病浔阳城。浔阳地僻无音乐,终岁不闻丝竹声。住近湓江地低湿,黄芦苦竹绕宅生。其间旦暮闻何物?杜鹃啼血猿哀鸣。春江花朝秋月夜,往往取酒还独倾。岂无山歌与村笛?呕哑嘲哳难为听。今夜闻君琵琶语,如听仙乐耳暂明。莫辞更坐弹一曲,为君翻作《琵琶行》。感我此言良久立,却坐促弦弦转急。凄凄不似向前声,满座重闻皆掩泣。座中泣下谁最多?江州司马青衫湿。`,
showHeight: 200,
toggle: false,
}
},
methods: {
showHeightChange(index) {
this.showHeight = index == 0 ? 100 : index == 1 ? 200 : 400;
},
toggleChange(index) {
this.toggle = index == 0 ? true : false;
}
}
}
</script>
<style lang="scss" scoped>
// 通过/deep/样式穿透去控制组件的内容
.wrap /deep/ .u-content {
color: #666!important;
}
</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.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
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