Showing preview only (800K chars total). Download the full file or copy to clipboard to get everything.
Repository: uileader/touchuiwx
Branch: master
Commit: fe5b9428359a
Files: 102
Total size: 706.0 KB
Directory structure:
gitextract_m7uqnks2/
├── .gitignore
├── LICENSE
├── README.md
├── app.wxa
├── min.config.json
├── package.json
├── pages/
│ ├── componentDemo/
│ │ ├── accordion.wx
│ │ ├── badge.wx
│ │ ├── blur.wx
│ │ ├── blur3.wx
│ │ ├── button.wx
│ │ ├── calendar.wx
│ │ ├── calendar2.wx
│ │ ├── calendar3.wx
│ │ ├── cascader.wx
│ │ ├── checklist.wx
│ │ ├── constant.wx
│ │ ├── countDown.wx
│ │ ├── countUp.wx
│ │ ├── demo.js
│ │ ├── divider.wx
│ │ ├── fixedView.wx
│ │ ├── fixedView2.wx
│ │ ├── icon.wx
│ │ ├── indexList.wx
│ │ ├── indexList1.wx
│ │ ├── indexList4.wx
│ │ ├── map/
│ │ │ ├── getLocation.wx
│ │ │ ├── mapDemo.wx
│ │ │ ├── mapDraw.wx
│ │ │ └── trajectory.wx
│ │ ├── mapService/
│ │ │ ├── mapSearchInput.wx
│ │ │ └── tencentmap.wx
│ │ ├── mapsdk/
│ │ │ ├── distanceCalculation.wx
│ │ │ ├── drawStaticMap.wx
│ │ │ ├── interestPointAroud.wx
│ │ │ ├── mapComprehensive.wx
│ │ │ ├── mapSearchTips.wx
│ │ │ └── routePlanning.wx
│ │ ├── mask/
│ │ │ ├── iconNav.wx
│ │ │ ├── mask.wx
│ │ │ ├── maskGuide.wx
│ │ │ └── maskTip.wx
│ │ ├── miniStar.wx
│ │ ├── popup.wx
│ │ ├── roller.wx
│ │ ├── row.wx
│ │ ├── rowImg.wx
│ │ ├── rowList.wx
│ │ ├── ruler.wx
│ │ ├── segment.wx
│ │ ├── segment2.wx
│ │ ├── showAlert.wx
│ │ ├── showConfirm.wx
│ │ ├── slider.wx
│ │ ├── star.wx
│ │ ├── stepper.wx
│ │ ├── sticky.wx
│ │ ├── sticky2.wx
│ │ ├── sticky3.wx
│ │ ├── sticky4.wx
│ │ ├── styleLib.wx
│ │ ├── summary.wx
│ │ ├── swipeOut.wx
│ │ ├── swiper.wx
│ │ ├── tabs.wx
│ │ ├── tabs2.wx
│ │ ├── tabs3.wx
│ │ ├── tags.wx
│ │ ├── timeline.wx
│ │ ├── timeline2.wx
│ │ ├── timeline3.wx
│ │ ├── v-calendar.wx
│ │ ├── v-calendar2.wx
│ │ ├── v-calendar3.wx
│ │ └── vtabs.wx
│ ├── home/
│ │ ├── about.wx
│ │ ├── apiList.wx
│ │ ├── changeList.wx
│ │ ├── formList.wx
│ │ ├── formList3.wx
│ │ ├── graphicalList.wx
│ │ ├── graphicalList2.wx
│ │ ├── mapList.wx
│ │ ├── mapList2.wx
│ │ ├── mediaCompList.wx
│ │ ├── modalList.wx
│ │ ├── textList.wx
│ │ ├── viewList.wx
│ │ └── viewList2.wx
│ └── index.wx
└── static/
├── data/
│ └── city.js
├── map/
│ └── amap-wx.js
├── styles/
│ ├── col.less
│ ├── components.less
│ ├── icon.less
│ ├── index.less
│ ├── reset.less
│ ├── row-list.less
│ └── row.less
└── utils/
├── mixins.less
└── system.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .gitignore
================================================
lib
dist
node_modules
.DS_Store
example/**/dist
package-lock.json
.idea
.vscode/
*.log
*.zip
================================================
FILE: LICENSE
================================================
MIT License
Copyright (c) 2017 Meili Inc.
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.
================================================
FILE: README.md
================================================
<p align="center">
<img width="200" height="200" src="https://github.com/uileader/touchui/blob/master/images/about_logo.png" />
</p>
<h1 align="center">Touch WX</h1>
#### Touch WX部分组件
<img src="https://github.com/uileader/touchui/blob/master/img/2.png" />
## 介绍
Touch WX是一套完全免费的微信小程序开发框架，包含丰富的UI控件用于官方组件的补充。特点如下：
##### 1、组件扩充：
增加了30多种常用的组件用于官方组件的补充。
##### 2、功能扩充：
兼容阿里的iconfont图标库，海量矢量图标随意使用；补充了常用样式库、支持less语法、支持全局配置主题色等
##### 3、开发体验改善：
四文件方式改为单文件方式，通过VSCode编辑器+插件的方式开发，拥有web开发体验；
##### 4、小程序转为H5应用：
可以与H5开发框架Touch UI工程相互转换，发布成webApp。开发一套代码，拥有两套应用。
##### 这套框架的原理是：
将Touch WX工程中所写的代码进行编译，直接输出为微信小程序工程原始代码。扩充的30多种组件，完全是基于小程序官方的自定义组件机制实现（row&col除外）。
所以它支持小程序的全部语法，怎么开发小程序，就怎么开发Touch WX。
不过因为是单文件的开发方式，在文件的代码结构上稍有不同。请注意这一点。
这样好处在于：
##### 1、开发者迁移成本很小。
可以轻松的将已有的小程序移植为Touch WX工程，来使用它的扩展能力；
##### 2、便于排查错误。
当遇到问题时，开发者也可以随时查看输出的小程序原始代码来定位问题所在。不会搞不清楚到底是框架问题还是自己代码的问题；
##### 3、按需编译
由于小程序对体积有限制，在使用框架开发时，只有使用到的组件才会编译输出为小程序源码。没用到的不会输出。
##### 4、不会对框架产生依赖。
以后不想用了这套框架，可以直接对已经输出的小程序工程进行维护。
## 注意事项
如果已经之前已经使用过Touch WX，运行过基础工程，可以跳过1、2步骤，直接开始第3步。
1、在本地运行代码时，需要安装Touch WX插件。
2、全局安装touchui-wx-cli
```
npm install -g touchui-wx-cli
```
3、右键，将该项目识别为Touch WX工程。
4、右键，安装项目依赖。如果没有成功的安装项目依赖，会报如下错误。
<img src="http://images.uileader.com/20180528/704ed529-b1d0-4e87-9e55-c26b72be3030.png" />
详情可以参考下面的Touch WX文档。
环境安装：“入门 >> 起步 >> 环境安装”
第一个程序：“入门 >> 起步 >> 第一个程序”
## 文档
<a href="http://www.wetouch.net/touchwx_doc">中文文档</a>
## Demo
<img src="http://static.uileader.com/touchui/img/minapp.jpg" />
## 讨论组
加下面的小助手微信进交流群。
<img src="http://www.touchui.io/img/weixin_frank.png" />
## 相关项目
<a href="https://github.com/uileader/touchui" >Touch UI</a>
Touch UI是一套高质量移动端UI框架。基于vue.js框架，我们精心打造了上百种的移动端UI组件，几乎囊括了开发移动应用的所有细节，真正实现拿来即用，像搭积木一样开发移动应用。
================================================
FILE: app.wxa
================================================
<template>
<page></page>
</template>
<script>
import system from './static/utils/system'
export default {
config: {
usingComponents: {},
pages: [
'pages/index',
'pages/home/viewList',
'pages/home/viewList2',
'pages/home/changeList',
'pages/home/modalList',
'pages/home/formList',
'pages/home/formList3',
'pages/home/textList',
'pages/home/mediaCompList',
'pages/home/graphicalList',
'pages/home/mapList',
'pages/home/mapList2',
'pages/home/graphicalList2',
'pages/componentDemo/slider',
'pages/componentDemo/ruler',
'pages/componentDemo/cascader',
'pages/componentDemo/checklist',
'pages/componentDemo/star',
'pages/componentDemo/mask/mask',
'pages/componentDemo/mask/iconNav',
'pages/componentDemo/mask/maskTip',
'pages/componentDemo/mask/maskGuide',
'pages/componentDemo/popup',
'pages/componentDemo/button',
'pages/componentDemo/row',
'pages/componentDemo/rowImg',
'pages/componentDemo/rowList',
'pages/componentDemo/swipeOut',
'pages/componentDemo/fixedView',
'pages/componentDemo/fixedView2',
'pages/componentDemo/sticky',
'pages/componentDemo/sticky2',
'pages/componentDemo/sticky3',
'pages/componentDemo/sticky4',
'pages/componentDemo/swiper',
'pages/componentDemo/accordion',
'pages/componentDemo/summary',
'pages/componentDemo/indexList',
'pages/componentDemo/indexList1',
'pages/componentDemo/indexList4',
'pages/componentDemo/calendar',
'pages/componentDemo/calendar2',
'pages/componentDemo/calendar3',
'pages/componentDemo/v-calendar',
'pages/componentDemo/v-calendar2',
'pages/componentDemo/v-calendar3',
'pages/componentDemo/badge',
'pages/componentDemo/tabs',
'pages/componentDemo/tabs2',
'pages/componentDemo/tabs3',
'pages/componentDemo/timeline',
'pages/componentDemo/timeline2',
'pages/componentDemo/timeline3',
'pages/componentDemo/vtabs',
'pages/componentDemo/divider',
'pages/componentDemo/blur',
'pages/componentDemo/blur3',
'pages/componentDemo/segment',
'pages/componentDemo/segment2',
'pages/componentDemo/tags',
'pages/componentDemo/star',
'pages/componentDemo/icon',
'pages/componentDemo/stepper',
'pages/home/about',
'pages/componentDemo/countDown',
'pages/componentDemo/countUp',
'pages/componentDemo/roller',
'pages/componentDemo/miniStar',
'pages/componentDemo/map/mapDemo',
'pages/componentDemo/map/trajectory',
'pages/componentDemo/map/getLocation',
'pages/componentDemo/mapsdk/interestPointAroud',
'pages/componentDemo/mapsdk/mapSearchTips',
'pages/componentDemo/mapsdk/distanceCalculation',
'pages/componentDemo/mapsdk/routePlanning',
'pages/componentDemo/mapsdk/drawStaticMap',
'pages/componentDemo/mapsdk/mapComprehensive',
'pages/componentDemo/mapService/tencentmap',
'pages/componentDemo/mapService/mapSearchInput',
'pages/componentDemo/map/mapDraw',
'pages/componentDemo/constant',
'pages/componentDemo/styleLib',
'pages/componentDemo/showAlert',
'pages/home/apiList',
'pages/componentDemo/showConfirm'
],
window: {
navigationStyle: 'custom',
backgroundTextStyle: 'dark',
backgroundColor: '#efefef',
navigationBarBackgroundColor: '#ffffff',
navigationBarTitleText: 'TouchUI',
navigationBarTextStyle: 'black'
},
tabBar: {
color: '#7a7e83',
selectedColor: '#39f',
backgroundColor: '#fff',
list: [{
pagePath: 'pages/index',
iconPath: 'images/component.png',
selectedIconPath: 'images/component1.png',
text: '组件'
},
{
pagePath: 'pages/home/about',
iconPath: 'images/user.png',
selectedIconPath: 'images/user1.png',
text: '关于'
}
]
},
networkTimeout: {
request: 10000
},
theme: {
'theme-color': '#3399ff'
}
},
globalData: {},
onLaunch() {
system.attachInfo()
},
onShow() {},
onHide() {}
}
</script>
<style lang="less">
@import './static/styles/index.less';
page {
font-size: 14px;
}
image {
width: 100%;
height: 100%;
display: block;
}
.touchui-hover {
background-color: #eee !important;
}
// 示例列表样式
.sample_list {
.ui-row {
font-size: 14px;
height: 46px;
line-height: 46px;
color: #333;
padding: 0 15px;
}
.group-title {
height: 50px;
line-height: 50px;
font-weight: bold;
font-size: 16px;
color: #168AFD;
.sign {
width: 5px;
height: 16px;
background-color: #168AFD;
border-radius: 5px;
}
.ui-row {
padding: 0 10px;
color: #168AFD;
view {
font-weight: bold;
}
}
}
}
// 示例title和内容
.sample_title {
background-color: #F7F9FB;
font-size: 14px;
font-weight: bold;
line-height: 40px;
padding-left: 20px;
}
.sample_content {
padding: 10px 20px;
line-height: 30px;
}
.content_list {
list-style: none;
background-color: #fff;
view {
padding: 0 15px;
height: 50px;
line-height: 50px;
font-size: 14px;
color: #666;
border-bottom: 1px solid #eee;
}
.grey-bg {
background-color: #f5f5f5;
}
}
</style>
================================================
FILE: min.config.json
================================================
{
"style": {
"brandColor": "#FF0077",
"controlColor": "#FF5777",
"mainHeadingColor": "#333333",
"subHeadingColor": "#666666",
"darkPromptColor": "#999999",
"splitLineColor": "#ECECEC",
"backgroundColour": "#EFEFEF"
},
"prefix": "wxc",
"dest": "dist",
"npm": {
"dest": "dist/packages"
},
"compilers": {
"babel": {
"presets": [
"env"
],
"plugins": [
"syntax-export-extensions",
"transform-class-properties",
"transform-decorators-legacy",
"transform-export-extensions"
]
}
}
}
================================================
FILE: package.json
================================================
{
"name": "touchui_minapp",
"description": "TouchUI-小程序",
"version": "1.0.0",
"license": "MIT",
"dependencies": {
"touchui-wx-components": "^1.0.11"
},
"devDependencies": {
"@types/weixin-app": "^1.9.0",
"babel-plugin-syntax-export-extensions": "^6.13.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-export-extensions": "^6.22.0",
"babel-preset-env": "^1.6.1"
},
"minConfig": {
"projectType": "application"
}
}
================================================
FILE: pages/componentDemo/accordion.wx
================================================
<template>
<view>
<ui-nav-bar slot="nav-bar" custom-style="{{ {borderBottom:'1px solid rgba(231, 231, 231, 0.6)',backgroundColor:'#fff'} }}">
<ui-row height="46">
<ui-col vertical-align="middle" align="center" width="60" bindtap="navigateBack">
<ui-icon type="arrow-left" size="16" color="#333"></ui-icon>
</ui-col>
<ui-col vertical-align="middle" align="center">
<view>手风琴</view>
</ui-col>
<ui-col vertical-align="middle" align="center" width="60">
</ui-col>
</ui-row>
</ui-nav-bar>
<view style="height:{{NAV_HEIGHT}}"></view>
<ui-accordion bindchange="slide" wx:for="{{ accordion }}" header-height="50">
<view slot="header">
<ui-row height="50" border-bottom class="title">
<ui-col vertical-align="middle" align="left" space-left="10">
{{ item.title }}
</ui-col>
<ui-col vertical-align="middle" align="center" width="60">
{{ item.number }}项
</ui-col>
<ui-col vertical-align="middle" align="center" width="60">
<view class="state {{ item.state }}" wx:if="{{ item.state==='abnormal' }}">{{ item.stateNum }}项异常</view>
<view class="state {{ item.state }}" wx:else>全部正常</view>
</ui-col>
<ui-col vertical-align="middle" align="center" width="30"></ui-col>
</ui-row>
</view>
<view slot="content">
<ui-row height="40" wx:for="{{ item.content }}" wx:for-item="item2" class='content'>
<ui-col vertical-align="middle" align="left" space-left="10">{{ item2.title }}</ui-col>
<ui-col vertical-align="middle" align="center" width="50">
<ui-icon name="{{ item.state==='abnormal' ? 'error':'success' }}" size="16" color="{{ item.state==='abnormal' ? '#F5AC29':'#2AA744' }}"></ui-icon>
</ui-col>
</ui-row>
</view>
</ui-accordion>
</view>
</template>
<script>
export default {
config: {
},
data: {
NAV_HEIGHT:wx.STATUS_BAR_HEIGHT+wx.DEFAULT_HEADER_HEIGHT+'px',
items: [],
accordion: [
{
title: '排除重大事故',
number: 20,
state: 'abnormal',
stateNum: 5,
content: [
{
title: '防火墙无火烧或熏黑痕迹'
},
{
title: '发动机线束无火烧或熏黑痕迹'
},
{
title: '车辆覆盖件无火烧或熏黑痕迹'
},
{
title: '舱内保险丝盒无火烧或熏黑痕迹'
}
]
}, {
title: '排除水泡车',
number: 8,
state: 'normal',
stateNum: 5,
content: [
{
title: '防火墙无火烧或熏黑痕迹'
},
{
title: '发动机线束无火烧或熏黑痕迹'
},
{
title: '车辆覆盖件无火烧或熏黑痕迹'
},
{
title: '舱内保险丝盒无火烧或熏黑痕迹'
}
]
}, {
title: '排除水泡车',
number: 8,
state: 'normal',
stateNum: 5,
content: [
{
title: '防火墙无火烧或熏黑痕迹'
},
{
title: '发动机线束无火烧或熏黑痕迹'
},
{
title: '车辆覆盖件无火烧或熏黑痕迹'
},
{
title: '舱内保险丝盒无火烧或熏黑痕迹'
}
]
}
]
},
navigateBack () {
wx.navigateBack()
}
}
</script>
<style lang="less">
.ui-accordion {
.header{
.arrow{
right: 8px;
top: 10px;
}
}
}
.title{
width: 100%;
background-color: #fff;
font-size: 14px;
.state{
border: 1px solid #797979;;
width: 100%;
height: 30px;
// .mix-flex-center();
color: #797979;
font-size: 12px;
&.abnormal{
border: 1px solid #F5AC29;;
color: #F5AC29;
}
&.normal{
border: 1px solid #2AA744;;
color: #2AA744;
}
}
}
.content{
background-color: #F6F6F6;
font-size: 14px;
border-bottom: 1px solid #fff;
}
</style>
================================================
FILE: pages/componentDemo/badge.wx
================================================
<!--badge.ui-->
<template>
<view>
<ui-nav-bar slot="nav-bar" custom-style="{{ {borderBottom:'1px solid rgba(231, 231, 231, 0.6)',backgroundColor:'#fff'} }}">
<ui-row height="46">
<ui-col vertical-align="middle" align="center" width="60" bindtap="navigateBack">
<ui-icon type="arrow-left" size="16" color="#333"></ui-icon>
</ui-col>
<ui-col vertical-align="middle" align="center">
<view>角标</view>
</ui-col>
<ui-col vertical-align="middle" align="center" width="60">
</ui-col>
</ui-row>
</ui-nav-bar>
<!-- 设置内容距离nav-bar高度占位 -->
<view style="height:{{NAV_HEIGHT}}"></view>
<ui-row-list border-left-indent style="height:{{NAV_HEIGHT}}">
<ui-row height="40">
<ui-col vertical-align="middle">
小圆点badge
</ui-col>
<ui-col align="right" vertical-align="middle" space-right="10">
<ui-badge custom-style="padding: 3px;"></ui-badge>
</ui-col>
</ui-row>
<ui-row height="40">
<ui-col vertical-align="middle">
圆点badge
</ui-col>
<ui-col align="right" vertical-align="middle" space-right="10">
<ui-badge></ui-badge>
</ui-col>
</ui-row>
<ui-row height="40">
<ui-col vertical-align="middle">
数字badge(一位数)
</ui-col>
<ui-col align="right" vertical-align="middle" space-right="10">
<ui-badge text="9"></ui-badge>
</ui-col>
</ui-row>
<ui-row height="40">
<ui-col vertical-align="middle">
数字badge(两位数)
</ui-col>
<ui-col align="right" vertical-align="middle" space-right="10">
<ui-badge text="99"></ui-badge>
</ui-col>
</ui-row>
<ui-row height="40">
<ui-col span="10" vertical-align="middle">
数字badge，超出99时显示99+
</ui-col>
<ui-col align="right" vertical-align="middle" space-right="10">
<ui-badge text="999"></ui-badge>
</ui-col>
</ui-row>
<ui-row height="40">
<ui-col span="10" vertical-align="middle">
文字badge
</ui-col>
<ui-col align="right" vertical-align="middle" space-right="10">
<ui-badge text="消息"></ui-badge>
</ui-col>
</ui-row>
<ui-row height="40">
<ui-col vertical-align="middle">
自定义样式
</ui-col>
<ui-col align="right" vertical-align="middle" space-right="10">
<ui-badge text="62" custom-style="{{customStyle}}"></ui-badge>
</ui-col>
</ui-row>
<ui-row height="40">
<ui-col span="10" vertical-align="middle">
自定义样式，超出999时显示999+
</ui-col>
<ui-col align="right" vertical-align="middle" space-right="10">
<ui-badge custom-style="{{customStyle}}" text="1200" maxlength="3"></ui-badge>
</ui-col>
</ui-row>
<ui-row height="40">
<ui-col span="10" vertical-align="middle">
自定义样式，圆角弧度和背景
</ui-col>
<ui-col align="right" vertical-align="middle" space-right="10">
<ui-badge custom-style="{{customStyle2}}" text="VIP" maxlength = 3></ui-badge>
</ui-col>
</ui-row>
<ui-row height="80">
<ui-col vertical-align="middle" span="8">
自定义样式，白色边框和背景
</ui-col>
<ui-col align="right" vertical-align="middle" space-right="10">
<view class="maoyan">
<image src="http://images.uileader.com/20180318/0b1707e5-654f-4aa5-851e-a963359706d3.png" width="48"></ui-image>
<ui-badge custom-style="{{customStyle3}}" text="5折"></ui-badge>
</view>
</ui-col>
</ui-row>
</ui-row-list>
</view>
</template>
<script>
export default {
config: {
"navigationBarTitleText": "角标"
},
data : {
NAV_HEIGHT:wx.STATUS_BAR_HEIGHT+wx.DEFAULT_HEADER_HEIGHT+'px',
customStyle:{
'background-color': '#00bc32'
},
customStyle2:{
'background-color': '#fa6e2d',
'border-radius': '3px',
'padding': '3px 8px'
},
customStyle3:{
'background-color': '#39f',
'position': 'absolute',
'top': '-5px',
'right': '-15px',
'border': '1px solid #fff'
}
},
navigateBack () {
wx.navigateBack()
}
}
</script>
<style lang="less">
.green {
background-color: #00bc32;
}
.vip {
background-color: #fa6e2d;
border-radius: 3px;
padding: 3px 8px;
}
.maoyan {
position: relative;
width: 48px;
height: 48px;
margin: 10px;
.icon-badge {
background-color: #39f;
position: absolute;
top: -5px;
right: -15px;
border: 1px solid #fff;
}
}
</style>
================================================
FILE: pages/componentDemo/blur.wx
================================================
<!--image8.ui-->
<template>
<view>
<!-- 自定义导航 -->
<ui-nav-bar slot="nav-bar" custom-style="{{ {borderBottom:'1px solid rgba(231, 231, 231, 0.6)',backgroundColor:'#fff'} }}">
<ui-row height="46">
<ui-col vertical-align="middle" align="center" width="60" bindtap="navigateBack">
<ui-icon type="arrow-left" size="16" color="#333"></ui-icon>
</ui-col>
<ui-col vertical-align="middle" align="center">
<view>朦胧图</view>
</ui-col>
<ui-col vertical-align="middle" align="center" width="60">
</ui-col>
</ui-row>
</ui-nav-bar>
<!-- 设置内容距离nav-bar高度占位 -->
<view style="height:{{NAV_HEIGHT}}"></view>
<view class="sample_title">基本使用</view>
<ui-divider>原图</ui-divider>
<view>
<image
src="{{ url }}"
mode='aspectFill'
style="width: 80px; height: 80px;"
></image>
</view>
<ui-divider>朦胧效果</ui-divider>
<ui-blur url="{{ url }}" height="200"></ui-blur>
<view class="sample_title">更换图片路径</view>
<ui-divider>原图</ui-divider>
<view>
<image
src="{{ url2 }}"
mode='aspectFill'
style="width: 80px; height: 80px;"
></image>
</view>
<ui-divider>朦胧效果</ui-divider>
<ui-blur url="{{ url2 }}" height="200"></ui-blur>
<view class="sample_title">自定义高度</view>
<ui-blur url="{{ url }}" height="300"></ui-blur>
</view>
</template>
<script>
export default {
config: {
"navigationBarTitleText": "朦胧图"
},
data: {
NAV_HEIGHT:wx.STATUS_BAR_HEIGHT+wx.DEFAULT_HEADER_HEIGHT+'px',
url: 'http://images.uileader.com/20180321/ce7dcb1c-5d37-485b-a429-95be5d10edbe.jpg',
url2: 'http://images.uileader.com/20180321/9d5abf36-1994-41cd-9f0d-e5977379b9fb.jpg'
},
navigateBack () {
wx.navigateBack()
}
}
</script>
<style lang="less">
.img_content_wrap{
height: 200px;
overflow: hidden;
}
</style>
================================================
FILE: pages/componentDemo/blur3.wx
================================================
<!--image8.ui-->
<template>
<view>
<ui-nav-bar slot="nav-bar" custom-style="{{ {backgroundColor:'rgba(255,255,255,0)',color:'#fff'} }}">
<ui-row height="46">
<ui-col vertical-align="middle" align="left" space-left="10" width="50" bindtap="navigateBack">
<ui-icon type="arrow-left" size="16" color="#fff"></ui-icon>
</ui-col>
<ui-col vertical-align="middle" align="center">
<view class="title">个人中心</view>
</ui-col>
<ui-col vertical-align="middle" align="center" width="50" >
</ui-col>
</ui-row>
</ui-nav-bar>
<view class="content_wrap">
<ui-blur height="300" url="{{ url }}">
<view class="top_content">
<view>
<image
src="{{ url }}"
mode='aspectFill'
style="width:60px;height:60px"
></image>
</view>
<view class="name">
TOUCH UI <ui-icon type="write" size="16" color="#fff"></ui-icon>
</view>
<view class="card">
<view>
美好生活PASS卡
</view>
</view>
</view>
</ui-blur>
<view class="content_list">
<view wx:for="{{ items }}" class="{{index % 2 == 0 ? 'grey-bg':''}}">
{{ item }}
</view>
</view>
</view>
</view>
</template>
<script>
export default {
config: {
"navigationStyle": "custom",
"navigationBarTextStyle": "white"
},
data : {
NAV_HEIGHT:wx.STATUS_BAR_HEIGHT+wx.DEFAULT_HEADER_HEIGHT+'px',
STATUS_BAR_HEIGHT:wx.STATUS_BAR_HEIGHT,
url: 'http://images.uileader.com/20180321/9e5ff8b2-d6a1-4a56-ab63-88bcd00560b0.png',
items: [],
alpha: 0,
className: ''
},
navigateBack () {
wx.navigateBack()
},
onReady: function () {
let arr = []
for (let i = 1; i <= 5; i++) {
arr.push(`列表项目${i}`)
}
this.setData({
items: arr
})
console.log(this.data.items)
}
}
</script>
<style lang="less">
.content_wrap{
.top_content{
width: 100%;
// height: 100%;
position: absolute;
bottom:20px;
view{
.mix-flex-center();
color: #fff;
font-size: 16px;
image{
border-radius: 50%;
border: 2px solid #fff;
}
.ui-icon{
margin-left: 10px;
}
&.name{
padding: 20px 0;
}
.ui-view{
display: inline-block;
padding: 5px;
border-radius: 25px;
border: 1px solid #fff;
}
&.card{
.ui-view{
font-size: 14px;
}
}
}
}
}
</style>
================================================
FILE: pages/componentDemo/button.wx
================================================
<!--button.ui-->
<template>
<view>
<ui-nav-bar slot="nav-bar" custom-style="{{ {borderBottom:'1px solid rgba(231, 231, 231, 0.6)',backgroundColor:'#fff'} }}">
<ui-row height="46">
<ui-col vertical-align="middle" align="center" width="60" bindtap="navigateBack">
<ui-icon type="arrow-left" size="16" color="#333"></ui-icon>
</ui-col>
<ui-col vertical-align="middle" align="center">
<view>按钮</view>
</ui-col>
<ui-col vertical-align="middle" align="center" width="60">
</ui-col>
</ui-row>
</ui-nav-bar>
<view style="height:{{NAV_HEIGHT}}"></view>
<view class="sample_title">自定义样式</view>
<view class="win">
<button class="button-style-demo1">立即预订</button>
<button type="primary" loading="{{isLoading}}" bindtap="submitHandler" disabled="{{isDisable}}">{{buttonText}}</button>
</view>
</view>
</template>
<script>
export default {
config: {
"navigationBarTitleText": "按钮"
},
data: {
NAV_HEIGHT:wx.STATUS_BAR_HEIGHT+wx.DEFAULT_HEADER_HEIGHT+'px',
isLoading: false,
buttonText: '提交',
isDisable: false,
hoverStopPropagation:true,
array: ['美国', '中国', '巴西', '日本'],
index: 0,
},
submitHandler () {
this.setData({
isLoading:true,
buttonText:'提交中...',
isDisable:true
})
// this.isLoading = true
// this.buttonText = '提交中...'
// this.isDisable = true
var that = this
setTimeout(function () {
// that.isLoading = false
// that.buttonText = '提交'
// that.isDisable = false
that.setData({
isLoading:false,
buttonText:'提交',
isDisable:false
})
}, 1000)
},
handleViewTap () {
wx.showToast({
title: '点击了ui-view'
})
},
bindPickerChange: function(e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
index: e.detail.value
})
},
handleButtonTap () {
wx.showToast({
title: '点击了ui-button'
})
},
navigateBack () {
wx.navigateBack()
}
}
</script>
<style lang="less">
// button.less
button{
margin: 6px 0;
}
.mini-button{
button{
margin-right:6px;
}
}
.win{padding:10px;}
.button-style-demo1 {
background-color: #C01920;
border-radius: 20px;
border-color: #C01920;
box-shadow: 3px 3px 8px #E57A7E;
color: #fff;
}
.button-style-demo1::after{
border: none;
}
.button-style-demo2 {
background-color: #4A88DB;
color: #fff;
}
.button-style-demo3 {
background-color: #4A88DB;
color: #fff;
img{
width: 16px;
height: 16px;
margin-right: 4px;
vertical-align: middle;
}
}
.hover-btn{
background-color:red;
border-color:red;
color:#fff
}
.icon-search{
font-size:14px;
}
</style>
================================================
FILE: pages/componentDemo/calendar.wx
================================================
<template>
<view>
<view style="height:{{contentHeight}}px">
<ui-nav-bar slot="nav-bar" custom-style="{{ {backgroundColor:'#39f',color:'#fff',borderBottom:'1px solid #39f'} }}">
<ui-row height="46">
<ui-col vertical-align="middle" align="center" width="60" bindtap="navigateBack">
<ui-icon type="arrow-left" size="16" color="#fff"></ui-icon>
</ui-col>
<ui-col vertical-align="middle" align="center">
</ui-col>
<ui-col vertical-align="middle" align="center" width="60">
</ui-col>
</ui-row>
</ui-nav-bar>
<view style="height:{{NAV_HEIGHT}}"></view>
<view class="personalbox">
<view class="headimgbox">
<image src="http://images.uileader.com/20180318/e62a5f83-64a6-428a-8726-7cbb65eab3dd.jpg"></image>
</view>
<ui-row class="infobox">
<ui-col align="center">
<text class="num">0</text>
<text class="text">连续签到天数</text>
</ui-col>
<ui-col align="center">
<text class="num">0</text>
<text class="text">积分</text>
</ui-col>
</ui-row>
</view>
<view class="calendartab">
<ui-row>
<ui-col bindtap="prevchange" align="center" width="50">
<ui-icon type="arrow-left" color="#666"></ui-icon>
</ui-col>
<ui-col>
<text>{{dateyear}}年{{datemonth}}月</text>
</ui-col>
<ui-col bindtap="nextchange" align="center" width="50">
<ui-icon type="arrow-right" color="#666"></ui-icon>
</ui-col>
</ui-row>
</view>
<ui-calendar
disable-past-days
select-range-mode="{{false}}"
bindmonthchange="monthChangeHandler"
bindchange="selectedHandler"
value="{{date}}"
show-month-range ="{{['2017/12/01', '2018/12/01']}}"
max-range="60"
date-page="{{datePage}}"
bindselectedstart="bindselectedstart"
bindselectedend="bindselectedend"
></ui-calendar>
<ui-row>
<ui-col vertical-align="middle" space-left="10">
<text>今日签到可得到10积分</text>
</ui-col>
<ui-col>
<button bindtap="qiandao">签到</ui-button>
</ui-col>
</ui-row>
</view>
</view>
</template>
<script>
export default {
config: {
"navigationBarTitleText": "",
"navigationBarBackgroundColor":"#39f",
"navigationBarTextStyle":"white",
"navigationBarBorderColor":"#39f"
},
data: {
NAV_HEIGHT:wx.STATUS_BAR_HEIGHT+wx.DEFAULT_HEADER_HEIGHT+'px',
datePage: '',
date: '',
dateobj: {},
dateyear: null,
datemonth: null,
dateday: null,
monthrange: [],
contentHeight: wx.DEFAULT_CONTENT_HEIGHT
},
// 选择日期
selectedHandler (val) {
let e = val.detail
this.init(e)
},
// 滑动时变化
monthChangeHandler (val) {
let e = val.detail
this.changeDate(e)
},
bindselectedstart(val){
let e = val.detail
},
bindselectedend(val){
let e = val.detail
},
nextchange () {
// 结束时间范围的时间戳
let endrange = Date.parse(new Date(this.data.monthrange[1]))
let arr = this.data.monthrange[1].split('/')
endrange = new Date(arr[0],arr[1]-1)
endrange = Date.parse(endrange)
let date = new Date(this.data.dateobj.arr[0],this.data.dateobj.arr[1]-1)
date.setMonth(date.getMonth() + 1)
// 改变后的日期时间戳
date = Date.parse(date)
if (date > endrange) {
return false
} else {
this.data.dateobj.date = this.format(date)
this.changeDate(this.data.dateobj.date)
this.data.datePage = this.data.dateobj.arr[0]+'/'+this.data.dateobj.arr[1]
this.setData({
datePage:this.data.datePage
})
}
},
prevchange () {
// let date = new Date(this.dateobj.date)
// 开始时间范围的时间戳
let startrange = Date.parse(new Date(this.data.monthrange[0]))
// let startrange
let arr = this.data.monthrange[0].split('/')
startrange = new Date(arr[0],arr[1]-1)
startrange = Date.parse(startrange)
let date = new Date(this.data.dateobj.arr[0],this.data.dateobj.arr[1]-1)
date.setMonth(date.getMonth() - 1)
// 改变后的日期时间戳
date = Date.parse(date)
if (date < startrange) {
return false
} else {
this.data.dateobj.date = this.format(date)
this.changeDate(this.data.dateobj.date)
this.data.datePage = this.data.dateobj.arr[0]+'/'+this.data.dateobj.arr[1]
this.setData({
datePage:this.data.datePage
})
}
},
qiandao () {
let arr = this.data.date.split('/')
let year = arr[0]
let month = arr[1]
let day = arr[2]
wx.showToast({ title: `签到：${year} 年 ${month} 月 ${day} 日` ,icon:"none"})
},
format (obj) {
var date = new Date(obj)
var y = 1900 + date.getYear()
var m = '0' + (date.getMonth() + 1)
var d = '0' + date.getDate()
return y + '/' + m.substring(m.length - 2, m.length) + '/' + d.substring(d.length - 2, d.length)
},
// 根据参数，改变dateobj。dateobj用来临时存储改变的时间。并且生成数组。
init (date) {
this.data.dateobj.date = date
this.data.dateobj.arr = date.split('/')
this.setData({
date:this.data.dateobj.date,
dateobj:this.data.dateobj,
dateyear:this.data.dateobj.arr[0],
datemonth:this.data.dateobj.arr[1],
dateday:this.data.dateobj.arr[2]
})
},
changeDate(date){
this.data.dateobj.date = date
this.data.dateobj.arr = date.split('/')
this.setData({
dateobj:this.data.dateobj,
dateyear:this.data.dateobj.arr[0],
datemonth:this.data.dateobj.arr[1],
})
},
onLoad () {
let start, end
let rangedate = new Date()
let rangedate2 = new Date()
start = this.format(rangedate.setMonth(new Date().getMonth() - 6))
end = this.format(rangedate2.setMonth(new Date().getMonth() + 6))
start = start.substring(0, 7)
end = end.substring(0, 7)
this.data.monthrange.push(start, end)
this.setData({
monthrange:this.data.monthrange
})
let date = new Date()
this.init(this.format(date))
},
navigateBack () {
wx.navigateBack()
}
}
</script>
<style lang="less">
.win{
background-color: #f4f2f3
}
.personalbox{
background-color: #39f;
.headimgbox{
width:50px;
height:50px;
border-radius: 50%;
margin:0 auto;
border:1px solid #ccc;
overflow: hidden;
.ui-image{
width:100%;
}
}
.infobox{
color:#fff;
padding:20px 0;
.num{
font-size:16px;
}
.text{
font-size:14px;
}
}
}
.calendartab{
width:200px;
margin:0 auto;
text-align: center;
line-height: 50px;
background-color: #fff
}
.calendartab{
margin-top:20px;
}
.calendar-head{
background-color:#fff !important
}
.calendar-week-head{
color:#333;
}
</style>
================================================
FILE: pages/componentDemo/calendar2.wx
================================================
<template>
<view>
<ui-nav-bar slot="nav-bar" custom-style="{{ {backgroundColor:'#fff'} }}">
<ui-row height="46">
<ui-col vertical-align="middle" align="center" width="60" bindtap="navigateBack">
<ui-icon type="arrow-left" size="16" color="#333"></ui-icon>
</ui-col>
<ui-col vertical-align="middle" align="center">
<view>纵向日历</view>
</ui-col>
<ui-col vertical-align="middle" align="center" width="60">
</ui-col>
</ui-row>
</ui-nav-bar>
<view style="margin-top:{{NAV_HEIGHT}}"></view>
<!-- 双选，默认不选 -->
<view class="sample_title">双选，默认不选</view>
<view class="win">
<ui-row>
<ui-col width="30" vertical-align="middle">
<ui-icon type="store"></ui-icon>
</ui-col>
<ui-col bindtap="rangeCalendaropen">
<ui-row height="15">
<ui-col align="left" class="smalltitle">入住</ui-col>
</ui-row>
<ui-row height="27" border-bottom style="padding-bottom:10px">
<ui-col align="left">{{rangestart}}</ui-col>
<ui-col width="35" align="center">
<text class="smalltitle2" wx:show="{{differShow}}">{{differ}}晚</text>
</ui-col>
</ui-row>
</ui-col>
<ui-col bindtap="rangeCalendaropen" vertical-align="middle">
<ui-row height="15" >
<ui-col space-right="25" align="right" class="smalltitle">离店</ui-col>
</ui-row>
<ui-row height="27" border-bottom style="padding-bottom:10px">
<ui-col space-right="25" align="right">{{rangeend}}</ui-col>
</ui-row>
</ui-col>
<view style="position:absolute;right:0">
<ui-icon type="arrow-right" size="12"></ui-icon>
</view>
</ui-row>
</view>
<!-- 双选，默认不选结束 -->
<!-- 双选，默认选中 -->
<view class="sample_title">双选，默认选中</view>
<view class="win">
<ui-row>
<ui-col width="30" vertical-align="middle">
<ui-icon type="store"></ui-icon>
</ui-col>
<ui-col bindtap="rangeCalendarDefaultOpen">
<ui-row height="15">
<ui-col align="left" class="smalltitle">入住</ui-col>
</ui-row>
<ui-row height="27" border-bottom style="padding-bottom:10px">
<ui-col align="left">{{rangestart2}}</ui-col>
<ui-col width="35" align="center">
<text class="smalltitle2">{{differ2}}晚</text>
</ui-col>
</ui-row>
</ui-col>
<ui-col bindtap="rangeCalendarDefaultOpen" vertical-align="middle">
<ui-row height="15" >
<ui-col space-right="25" align="right" class="smalltitle">离店</ui-col>
</ui-row>
<ui-row height="27" border-bottom style="padding-bottom:10px">
<ui-col space-right="25" align="right">{{rangeend2}}</ui-col>
</ui-row>
</ui-col>
<view style="position:absolute;right:0">
<ui-icon type="arrow-right" size="12"></ui-icon>
</view>
</ui-row>
</view>
<!-- 双选，默认选中结束 -->
<view class="sample_title">单选</view>
<view class="win">
<ui-row height="46" space-top="15" bindtap="radioCalendaropen">
<ui-col width="30" vertical-align="middle">
<ui-icon type="store"></ui-icon>
</ui-col>
<ui-col>
<ui-row height="15">
<ui-col align="left" class="smalltitle">时租房（仅限一天）</ui-col>
</ui-row>
<ui-row border-bottom style="padding-bottom:10px">
<ui-col align="left">{{radioMonth}}月{{radioDay}}日</ui-col>
<ui-col width="25">
</ui-col>
</ui-row>
</ui-col>
<ui-col width="30" vertical-align="middle" align="right" style="border-bottom:1px solid #ddd;">
<ui-icon type="arrow-right" size="12"></ui-icon>
</ui-col>
</ui-row>
</view>
<!-- 单选结束 -->
<view class="win">
<ui-row space-top="15">
<button class="btnyd">立即预订</button>
</ui-row>
</view>
</view>
</template>
<script>
export default {
config: {
"navigationBarTitleText": "纵向日历"
},
data: {
NAV_HEIGHT:wx.STATUS_BAR_HEIGHT+wx.DEFAULT_HEADER_HEIGHT+'px',
statusBarHeight: wx.STATUS_BAR_HEIGHT,
headerHeight: wx.DEFAULT_HEADER_HEIGHT,
radioCalendar: false,
radioDate: '',
radioMonth: '',
radioDay: '',
// 时间对象，存储临时变化的时间
dateobj: {},
// 时间可选范围
monthrange: [],
// 默认选中的时间范围
defaultMonthrange: [],
rangeCalendar: false,
rangeCalendarDefault: false,
// 时间差
differ: '',
differ2: '2',
differShow: false,
rangestart: '',
rangeend: '',
rangestart2: '',
rangeend2: '',
height: wx.WIN_HEIGHT
},
radioinit (thisdate) {
this.data.dateobj.radioDate = thisdate
this.data.dateobj.radioDate = thisdate.split('/')
this.data.radioDate = this.data.dateobj.radioDate
this.data.radioMonth = this.data.dateobj.radioDate[1]
this.data.radioDay = this.data.dateobj.radioDate[2]
this.setData({
radioDate:thisdate,
radioMonth:this.data.dateobj.radioDate[1],
radioDay:this.data.dateobj.radioDate[2]
})
},
format (obj) {
var date = new Date(obj)
var y = 1900 + date.getYear()
var m = '0' + (date.getMonth() + 1)
var d = '0' + date.getDate()
return y + '/' + m.substring(m.length - 2, m.length) + '/' + d.substring(d.length - 2, d.length)
},
radioCalendaropen () {
// this.setData({
// radioCalendar:true
// })
wx.navigateTo({
url: '/pages/componentDemo/v-calendar3'
})
},
// 双选打开
rangeCalendaropen (state) {
// this.setData({
// rangeCalendar:true
// })
wx.navigateTo({
url: '/pages/componentDemo/v-calendar'
})
},
rangeCalendarDefaultOpen () {
wx.navigateTo({
url: '/pages/componentDemo/v-calendar2'
})
},
onLoad () {
// 计算时间范围
let radiodate = new Date()
let rangedate = new Date()
let rangedate2 = new Date()
this.radioDate = this.format(Date.parse(radiodate))
let start, end, defaultStart, defaultEnd
start = this.format(rangedate.setMonth(new Date().getMonth()))
end = this.format(rangedate.setMonth(new Date().getMonth() + 6))
start = start.substring(0, 7)
end = end.substring(0, 7)
this.data.monthrange.push(start, end)
defaultStart = this.format(rangedate2.setDate(new Date().getDate()))
defaultEnd = this.format(rangedate2.setDate(new Date().getDate() + 2))
this.data.defaultMonthrange.push(defaultStart, defaultEnd)
console.log(this.data.defaultMonthrange)
this.data.rangestart2 = this.data.defaultMonthrange[0]
this.data.rangeend2 = this.data.defaultMonthrange[1]
this.setData({
rangestart2:this.data.rangestart2,
rangeend2:this.data.rangeend2,
monthrange:this.data.monthrange,
defaultMonthrange:this.data.defaultMonthrange
})
let date = new Date()
this.radioinit(this.format(date))
},
navigateBack () {
wx.navigateBack()
}
}
</script>
<style lang="less">
// calendar2.less
.swiper-slide {
.ui-image {
width: 100%;
}
}
.win{
padding:10px 30px;
}
.smalltitle{
font-size:12px;
color:#666
}
.smalltitle2{
background-color:#ebc7c8;
color: #C01920;
padding:0px 3px;
border-radius: 5px;
font-size:12px;
}
.btnyd {
width:100%;
background-color: #C01920;
border-radius: 20px;
border-color: #C01920;
box-shadow: 3px 3px 8px #E57A7E;
color: #fff;
}
.btnyd::after{
border: none;
}
</style>
================================================
FILE: pages/componentDemo/calendar3.wx
================================================
<template>
<view>
<ui-nav-bar slot="nav-bar">
<ui-row height="46">
<ui-col vertical-align="middle" align="center" width="60" bindtap="navigateBack">
<ui-icon type="arrow-left" size="16" color="#333"></ui-icon>
</ui-col>
<ui-col vertical-align="middle" align="center">
<view>{{dataMonth}}</view>
</ui-col>
<ui-col vertical-align="middle" align="center" width="60">
</ui-col>
</ui-row>
</ui-nav-bar>
<view style="height:{{NAV_HEIGHT}}"></view>
<view class="bg-blue">
<ui-w-calendar
value="{{date}}"
bindchanged="selectedHandler"
bindweekchange="weekHandler"
date-range="{{[2,2]}}"
></ui-w-calendar>
</view>
<text block style="margin-top:10px;text-align:center">当前选中的日期是{{dateDay}}</text>
</view>
</template>
<script>
export default {
config: {
"navigationBarTitleText": "calendar3",
"navigationStyle": "custom"
},
data: {
NAV_HEIGHT:wx.STATUS_BAR_HEIGHT+wx.DEFAULT_HEADER_HEIGHT+'px',
date: '',
dateDay: '',
dateObj: {},
dataMonth:''
},
selectedHandler (e) {
console.log(e,'selectedHandlerselectedHandler')
let val = e.detail
console.log(val)
this.data.dateObj = val.split('/')
this.data.dateDay = `${this.data.dateObj[0]}年${this.data.dateObj[1]}月${this.data.dateObj[2]}日`
this.setData({
dateObj:this.data.dateObj,
dateDay:this.data.dateDay
})
},
weekHandler (e) {
console.log(e,'weekHandler')
let dataMonth = e.detail.substring(0,7)
dataMonth = dataMonth.split('/')
console.log(dataMonth)
this.data.dataMonth = `${dataMonth[0]}年${dataMonth[1]}月`
console.log(this.data.dataMonth)
this.setData({
dataMonth:this.data.dataMonth
})
},
navigateBack () {
ui.navigateBack()
},
format (obj) {
var date = new Date(obj)
var y = 1900 + date.getYear()
var m = '0' + (date.getMonth() + 1)
var d = '0' + date.getDate()
return y + '/' + m.substring(m.length - 2, m.length) + '/' + d.substring(d.length - 2, d.length)
},
navigateBack () {
wx.navigateBack()
},
onLoad () {
let date = new Date()
date = Date.parse(date)
date = this.format(date)
this.data.date = date
this.data.dateObj = this.data.date.split('/')
this.data.dateDay = `${this.data.dateObj[0]}年${this.data.dateObj[1]}月${this.data.dateObj[2]}日`
this.data.dataMonth = `${this.data.dateObj[0]}年${this.data.dateObj[1]}月`
this.setData({
date:date,
dateObj:this.data.dateObj,
dateDay:this.data.dateDay,
dataMonth:this.data.dataMonth
})
}
}
</script>
<style lang="less">
// calendar3.less
.ui-nav-bar{
background-color: #39f;
color:#fff
}
.calendartab{
padding:10px 0
}
.ui-w-calendar{
background-color: transparent;
color:#fff;
}
.is-holiday{
color:#fff !important;
}
.bg-blue{
background-color:#3399FF;
width:100%;
height: 100px;
position: relative;
}
</style>
================================================
FILE: pages/componentDemo/cascader.wx
================================================
<template>
<view>
<ui-nav-bar slot="nav-bar" custom-style="{{ {borderBottom:'1px solid rgba(231, 231, 231, 0.6)',backgroundColor:'#fff'} }}">
<ui-row height="46">
<ui-col vertical-align="middle" align="center" width="60" bindtap="navigateBack">
<ui-icon type="arrow-left" size="16" color="#333"></ui-icon>
</ui-col>
<ui-col vertical-align="middle" align="center">
<view>级联选择器</view>
</ui-col>
<ui-col vertical-align="middle" align="center" width="60">
</ui-col>
</ui-row>
</ui-nav-bar>
<view style="height:{{NAV_HEIGHT}}"></view>
<view class="sample_title">右侧弹出</view>
<ui-row height="40" border-top border-bottom>
<ui-col span="3" vertical-align="middle" align="right" space-right="10">
附近
</ui-col>
<ui-col span="9" bindtap="showPop2" vertical-align="middle">
{{title2}}
</ui-col>
</ui-row>
<ui-popup show="{{show2}}" position="right" width="80%" top="{{ poptpTop }}" mask-style="{{ {backgroundColor:'rgba(255,255,255,0.6)'} }}">
<ui-cascader bindselected="handleselected2" data="{{data2}}" height="{{height}}"></ui-cascader>
</ui-popup>
<view class="sample_title">自定义颜色</view>
<ui-row height="40" border-top border-bottom>
<ui-col span="3" vertical-align="middle" align="right" space-right="10">
附近
</ui-col>
<ui-col span="9" bindtap="showPop4" vertical-align="middle">
{{title4}}
</ui-col>
</ui-row>
<ui-popup show="{{show4}}" position="bottom" width="100%" height="300">
<ui-cascader bindselected="handleselected4" data="{{data2}}" theme-color="red"></ui-cascader>
</ui-popup>
<view class="sample_title">二级联动</view>
<ui-row height="40" border-top border-bottom>
<ui-col span="3" vertical-align="middle" align="right" space-right="10">
请选择部门
</ui-col>
<ui-col span="9" bindtap="showPop5" vertical-align="middle">
{{title5}}
</ui-col>
</ui-row>
<ui-popup show="{{show5}}" position="top" width="100%" height="300" top="{{ poptpTop }}" mask-style="{{ {backgroundColor:'rgba(255,255,255,0.6)',top:poptpTop+'px'} }}">
<ui-cascader show-title="{{false}}" bindselected="handleselected5" data="{{data3}}"></ui-cascader>
</ui-popup>
<view class="sample_title">动态加载数据</view>
<ui-row height="40" border-top border-bottom>
<ui-col span="3" vertical-align="middle" align="right" space-right="10">
所在地区
</ui-col>
<ui-col span="9" bindtap="showPop1" vertical-align="middle">
{{title1}}
</ui-col>
</ui-row>
<ui-popup show="{{show1}}" position="bottom" width="100%" height="300">
<ui-cascader data="{{data1}}" bindselected="handleselected1" ></ui-cascader>
</ui-popup>
</view>
</template>
<script>
export default {
config: {
"navigationBarTitleText": "级联选择器"
},
data: {
poptpTop: wx.STATUS_BAR_HEIGHT+wx.DEFAULT_HEADER_HEIGHT,
NAV_HEIGHT:wx.STATUS_BAR_HEIGHT+wx.DEFAULT_HEADER_HEIGHT+'px',
height:wx.DEFAULT_CONTENT_HEIGHT,
show1:false,
title1: '请选择',
title2: '请选择',
title3: '请选择',
title4: '请选择',
title5: '请选择',
show2:false,
show3:false,
show4:false,
show5:false,
data1:[],
data2: [{
name: '美食',
value: 'food',
children: [
{
name: '火锅',
value: 'chafing dish',
children: [
{ name: '川味火锅', value: 'SiChuan chafing dish' },
{ name: '老北京火锅', value: 'Beijing chafing dish' },
{ name: '牛肉火锅', value: 'Beef chafing dish' }
]
}, {
name: '西餐',
value: 'western food',
children: [
{ name: '意大利菜', value: 'Italy food' },
{ name: '法国菜', value: 'France food' },
{ name: '汉堡', value: 'Hamburg' }
]
}
]
}, {
name: '旅游',
value: 'tour',
children: [
{
name: '周边游',
value: 'tour around',
children: [
{ name: '景点', value: 'Scenic spot' },
{ name: '公园', value: 'Park' },
{ name: '名胜古迹', value: 'Historical sites' }
]
}, {
name: '海外游',
value: 'tour aboard',
children: [
{ name: '美国游', value: 'American tour' },
{ name: '欧洲游', value: 'Europe tour' },
{ name: '东南亚游', value: 'Southease Asia tour' }
]
}
]
}],
data3: [{
name: '采购部',
value: 'DP_01',
children: [
{ name: '采购一科', value: 'DP_0101' },
{ name: '采购二科', value: 'DP_0102' },
{ name: '采购三科', value: 'DP_0103' }
]
}, {
name: '制造部',
value: 'DP_02',
children: [
{ name: '制造一科', value: 'DP_0201' },
{ name: '制造二科', value: 'DP_0202' },
{ name: '制造三科', value: 'DP_0203' }
]
}]
},
showPop1(){
this.setData({
show1:true
})
},
showPop2(){
this.setData({
show2:true
})
},
showPop3(){
this.setData({
show3:true
})
},
showPop4(){
this.setData({
show4:true
})
},
showPop5(){
this.setData({
show5:true
})
},
navigateBack () {
wx.navigateBack()
},
handleselected1(e){
let data = e.detail
this.data.title1 = ""
for (var i = 0; i < data.length; i++) {
this.data.title1 += data[i].name + ' '
}
this.setData({
show1: false,
title1: this.data.title1
})
},
handleselected2(e){
let data = e.detail
console.log(data)
this.data.title2 = ""
for (var i = 0; i < data.length; i++) {
this.data.title2 += data[i].name + ' '
}
this.setData({
show2: false,
title2: this.data.title2
})
},
handleselected3(e) {
let data = e.detail
this.data.title3 = ""
for (var i = 0; i < data.length; i++) {
this.data.title3 += data[i].name + ' '
}
this.setData({
show3: false,
title3: this.data.title3
})
},
handleselected4(e) {
let data = e.detail
this.data.title4 = ""
for (var i = 0; i < data.length; i++) {
this.data.title4 += data[i].name + ' '
}
this.setData({
show4: false,
title4: this.data.title4
})
},
handleselected5(e) {
console.log(e,'121212')
let data = e.detail
this.data.title5 = ""
for (var i = 0; i < data.length; i++) {
this.data.title5 += data[i].name + ' '
}
this.setData({
show5: false,
title5: this.data.title5
})
},
onReady: function () {
console.log(this.data.data2)
this.setData({
data1 :[{
name: '美食',
value: 'food',
children: [
{
name: '火锅',
value: 'chafing dish',
children: [
{ name: '川味火锅', value: 'SiChuan chafing dish' },
{ name: '老北京火锅', value: 'Beijing chafing dish' },
{ name: '牛肉火锅', value: 'Beef chafing dish' }
]
}, {
name: '西餐',
value: 'western food',
children: [
{ name: '意大利菜', value: 'Italy food' },
{ name: '法国菜', value: 'France food' },
{ name: '汉堡', value: 'Hamburg' }
]
}
]
}, {
name: '旅游',
value: 'tour',
children: [
{
name: '周边游',
value: 'tour around',
children: [
{ name: '景点', value: 'Scenic spot' },
{ name: '公园', value: 'Park' },
{ name: '名胜古迹', value: 'Historical sites' }
]
}, {
name: '海外游',
value: 'tour aboard',
children: [
{ name: '美国游', value: 'American tour' },
{ name: '欧洲游', value: 'Europe tour' },
{ name: '东南亚游', value: 'Southease Asia tour' }
]
}
]
}, {
name: '旅游',
value: 'tour',
children: [
{
name: '周边游',
value: 'tour around',
children: [
{ name: '景点', value: 'Scenic spot' },
{ name: '公园', value: 'Park' },
{ name: '名胜古迹', value: 'Historical sites' }
]
}, {
name: '海外游',
value: 'tour aboard',
children: [
{ name: '美国游', value: 'American tour' },
{ name: '欧洲游', value: 'Europe tour' },
{ name: '东南亚游', value: 'Southease Asia tour' }
]
}
]
}, {
name: '旅游',
value: 'tour',
children: [
{
name: '周边游',
value: 'tour around',
children: [
{ name: '景点', value: 'Scenic spot' },
{ name: '公园', value: 'Park' },
{ name: '名胜古迹', value: 'Historical sites' }
]
}, {
name: '海外游',
value: 'tour aboard',
children: [
{ name: '美国游', value: 'American tour' },
{ name: '欧洲游', value: 'Europe tour' },
{ name: '东南亚游', value: 'Southease Asia tour' }
]
}
]
}]
})
}
}
</script>
<style>
</style>
================================================
FILE: pages/componentDemo/checklist.wx
================================================
<template>
<ui-nav-bar slot="nav-bar" custom-style="{{ {borderBottom:'1px solid rgba(231, 231, 231, 0.6)',backgroundColor:'#fff'} }}">
<ui-row height="46">
<ui-col vertical-align="middle" align="center" width="60" bindtap="navigateBack">
<ui-icon type="arrow-left" size="16" color="#333"></ui-icon>
</ui-col>
<ui-col vertical-align="middle" align="center">
<view>check-list</view>
</ui-col>
<ui-col vertical-align="middle" align="center" width="60">
</ui-col>
</ui-row>
</ui-nav-bar>
<view style="height:{{NAV_HEIGHT}}"></view>
<view class="sample_title">多选，label在左侧</view>
<ui-divider>样式为对号</ui-divider>
<ui-check-list label-position="left" options="{{ countryList }}" type="plain" value="{{ checklist1 }}"></ui-check-list>
<ui-divider>样式为圆形</ui-divider>
<ui-check-list label-position="left" options="{{ countryList }}" type="circle" value="{{ checklist2 }}"></ui-check-list>
<view class="sample_title">多选，label在右侧</view>
<ui-divider>样式为方形</ui-divider>
<ui-check-list label-position="right" options="{{ countryList }}" value="{{ checklist3 }}" ></ui-check-list>
<ui-divider>样式为圆形</ui-divider>
<ui-check-list label-position="right" options="{{ countryList }}" type="circle" value="{{ checklist4 }}"></ui-check-list>
<view class="sample_title">单选</view>
<ui-divider>label在左侧</ui-divider>
<ui-check-list max="1" label-position="left" options="{{ countryList }}" type="plain" value="{{ checklist5 }}" ></ui-check-list>
<ui-divider>label在右侧</ui-divider>
<ui-check-list max="1" label-position="right" options="{{ countryList }}" type="circle" value="{{ checklist6 }}" ></ui-check-list>
<view class="sample_title">设置最大值checklist</view>
<ui-check-list max="2" options="{{ countryList }}" value="{{ checklist7 }}" ></ui-check-list>
<view class="sample_title">自定义颜色</view>
<ui-check-list options="{{ countryList }}" color="#e60012"></ui-check-list>
<view class="sample_title">使用change事件</view>
<ui-check-list options="{{ countryList }}" bindchange="change"></ui-check-list>
<view class="sample_title">默认选中和禁用(中国被选中)</view>
<ui-check-list options="{{ countryList }}" disabled value="{{ checklist8 }}" ></ui-check-list>
<view class="sample_title">使用对象数组数据源</view>
<ui-check-list options="{{ objectList }}" value="{{ objectListValue }}" ></ui-check-list>
<view class="sample_title">使用副标题</view>
<ui-divider>多选</ui-divider>
<ui-check-list options="{{ inlineDescList }}" value="{{ inlineDescListValue }}"></ui-check-list>
<ui-divider>单选</ui-divider>
<ui-check-list max="1" options="{{ inlineDescList }}" value="{{ inlineDescListValue2 }}" type="circle"></ui-check-list>
</template>
<script>
export default {
config: {
"navigationBarTitleText": "选择列表"
},
data: {
NAV_HEIGHT:wx.STATUS_BAR_HEIGHT+wx.DEFAULT_HEADER_HEIGHT+'px',
labelPosition: '',
countryList: ['中国', '香港', '澳大利亚'],
checklist1: ['中国'],
checklist2: [],
checklist3: [],
checklist4: [],
checklist5: [],
checklist6: [],
checklist7: [],
checklist8: ['中国'],
checklist9: [],
objectList: [{
key: 'SZ',
value: '深圳'
}, {
key: 'GZ',
value: '广州'
}, {
key: 'ZH',
value: '珠海'
}, {
key: 'ST',
value: '汕头'
}],
objectListValue: ['SZ'],
inlineDescList: [
{key: '1', value: '广东', subTitle: '深圳，广州，东莞'},
{key: '2', value: '浙江', subTitle: '杭州，宁波，嘉兴'},
{key: '3', value: '江苏', subTitle: '南京，苏州，无锡'}
],
inlineDescListValue: ['1'],
inlineDescListValue2: ['1']
},
change (e) {
console.log(e)
let val = e.detail.value
wx.showToast({ title: val.join(','),icon:'none' })
},
navigateBack () {
wx.navigateBack()
}
}
</script>
<style lang="less">
.demo{
.is-checked .ui-checkbox-inner{
background-image: url('~images/duigou.svg');
background-size:70%;
background-color: transparent;
background-repeat: no-repeat;
border:none
}
.is-checked .weui-cell__bd{
color:#ff5723
}
.ui-checkbox__check{
border:none;
}
.ui-checkbox-inner{
border:none
}
}
</style>
================================================
FILE: pages/componentDemo/constant.wx
================================================
<!--constant.ui-->
<template>
<view>
<ui-nav-bar slot="nav-bar" custom-style="{{ {borderBottom:'1px solid rgba(231, 231, 231, 0.6)',backgroundColor:'#fff'} }}">
<ui-row height="46">
<ui-col vertical-align="middle" align="center" width="60" bindtap="navigateBack">
<ui-icon type="arrow-left" size="16" color="#333"></ui-icon>
</ui-col>
<ui-col vertical-align="middle" align="center">
<view>获取常量</view>
</ui-col>
<ui-col vertical-align="middle" align="center" width="60">
</ui-col>
</ui-row>
</ui-nav-bar>
<view style="height:{{NAV_HEIGHT}}"></view>
<view class="content">
<ui-row-list>
<ui-row height="40" space-bottom="10">
<ui-col span="5" vertical-align="middle" align="right">
App环境：
</ui-col>
<ui-col span="7" vertical-align="middle" space-left="10">
<view>{{ isAPP }}</view>
</ui-col>
</ui-row>
<ui-row height="40" space-bottom="10">
<ui-col span="5" vertical-align="middle" align="right">
Android环境：
</ui-col>
<ui-col span="7" vertical-align="middle" space-left="10">
<view>{{ isAndroid }}</view>
</ui-col>
</ui-row>
<ui-row height="40" space-bottom="10">
<ui-col span="5" vertical-align="middle" align="right">
IOS环境：
</ui-col>
<ui-col span="7" vertical-align="middle" space-left="10">
<view>{{ isIOS }}</view>
</ui-col>
</ui-row>
<ui-row height="40" space-bottom="10">
<ui-col span="5" vertical-align="middle" align="right">
窗体高度：
</ui-col>
<ui-col span="7" vertical-align="middle" space-left="10">
<view>{{ winHeight }}</view>
</ui-col>
</ui-row>
<ui-row height="40" space-bottom="10">
<ui-col span="5" vertical-align="middle" align="right">
状态栏高度：
</ui-col>
<ui-col span="7" vertical-align="middle" space-left="10">
<view>{{ statusBarHright }}</view>
</ui-col>
</ui-row>
<ui-row height="40" space-bottom="10">
<ui-col span="5" vertical-align="middle" align="right">
当前导航栏高度：
</ui-col>
<ui-col span="7" vertical-align="middle" space-left="10">
<view>{{ defaultHeaderHeight }}</view>
</ui-col>
</ui-row>
<ui-row height="40" space-bottom="10">
<ui-col span="5" vertical-align="middle" align="right">
当前内容高度：
</ui-col>
<ui-col span="7" vertical-align="middle" space-left="10">
<view>{{ defaultContentHright }}</view>
</ui-col>
</ui-row>
<ui-row height="40" space-bottom="10">
<ui-col span="5" vertical-align="middle" align="right">
当前屏幕宽度：
</ui-col>
<ui-col span="7" vertical-align="middle" space-left="10">
<view>{{ winWidth }}</view>
</ui-col>
</ui-row>
</ui-row-list>
</view>
</view>
</template>
<script>
// constant.js
export default {
config: {
"navigationBarTitleText": "获取常量"
},
data : {
NAV_HEIGHT:wx.STATUS_BAR_HEIGHT+wx.DEFAULT_HEADER_HEIGHT+'px',
isAPP:'',
isAndroid:'',
isIOS:'',
winHeight:'',
statusBarHright:'',
defaultHeaderHeight:'',
defaultContentHright:'',
winWidth:''
},
onReady () {
this.setData({
isAPP:wx.IS_APP,
isAndroid:wx.IS_ANDROID,
isIOS:wx.IS_IOS,
winHeight:wx.WIN_HEIGHT,
statusBarHright:wx.STATUS_BAR_HEIGHT,
defaultHeaderHeight:wx.DEFAULT_HEADER_HEIGHT,
defaultContentHright:wx.DEFAULT_CONTENT_HEIGHT,
winWidth:wx.WIN_WIDTH
})
},
navigateBack () {
wx.navigateBack()
}
}
</script>
<style lang="less">
// constant.less
.content{
padding: 10px;
}
</style>
================================================
FILE: pages/componentDemo/countDown.wx
================================================
<!--countUp.ui-->
<template>
<view>
<ui-nav-bar slot="nav-bar" custom-style="{{ {borderBottom:'1px solid rgba(231, 231, 231, 0.6)',backgroundColor:'#fff'} }}">
<ui-row height="46">
<ui-col vertical-align="middle" align="center" width="60" bindtap="navigateBack">
<ui-icon type="arrow-left" size="16" color="#333"></ui-icon>
</ui-col>
<ui-col vertical-align="middle" align="center">
<view>倒计时</view>
</ui-col>
<ui-col vertical-align="middle" align="center" width="60">
</ui-col>
</ui-row>
</ui-nav-bar>
<view style="height:{{NAV_HEIGHT}}"></view>
<view class="sample_title">基本使用</view>
<view class="sample_content">
<ui-count-down time="2019/11/10 06:06:06"></ui-count-down>
</view>
<view class="sample_title">传入时间为秒</view>
<view class="sample_content">
<ui-count-down time="20" timetype="second" done-text="结束啦～～" format="{%s}秒" bindtimeup="bindtimeup"></ui-count-down>
</view>
<view class="sample_title">自定义参数模版</view>
<view class="sample_content">
<ui-count-down time="2019/11/10 06:06:06" format="{%d}天-{%h}时-{%m}分-{%s}秒"></ui-count-down>
</view>
<view class="sample_title">自定义样式</view>
<view class="sample_content">
<view class="custom">
<view class="title">大牌臻选</view>
<ui-count-down
timetype="second"
time="10000"
format="{%h}时{%m}分{%s}秒"
number-style="{{numberStyle}}"></ui-count-down>
</view>
</view>
</view>
</template>
<script>
// countDown.js
export default {
config: {
"navigationBarTitleText": "倒计时"
},
data : {
NAV_HEIGHT:wx.STATUS_BAR_HEIGHT+wx.DEFAULT_HEADER_HEIGHT+'px',
numberStyle: {
backgroundColor: '#4c4c4c',
color: '#fff',
paddingLeft: '4px',
paddingRight: '4px',
marginLeft: '8px',
marginRight: '8px',
borderRadius: '4px',
fontSize:'12px',
minWidth:'30px',
display:'inline-block',
textAlign:'center',
lineHeight:'20px'
}
},
navigateBack () {
wx.navigateBack()
},
bindtimeup(){
wx.showToast({title:'倒计时结束',icon:'none'})
}
}
</script>
<style lang="less">
.custom{
width:210px;
border:1px solid #f5f5f5;
padding: 10px;
position:relative;
.title{
font-size: 18px;
text-align: center;
line-height: 30px;
color: #1D1D1D;
font-weight: 800;
}
}
</style>
================================================
FILE: pages/componentDemo/countUp.wx
================================================
<!--countUp.ui-->
<template>
<view>
<ui-nav-bar slot="nav-bar" custom-style="{{ {borderBottom:'1px solid rgba(231, 231, 231, 0.6)',backgroundColor:'#fff'} }}">
<ui-row height="46">
<ui-col vertical-align="middle" align="center" width="60" bindtap="navigateBack">
<ui-icon type="arrow-left" size="16" color="#333"></ui-icon>
</ui-col>
<ui-col vertical-align="middle" align="center">
<view>数字动画</view>
</ui-col>
<ui-col vertical-align="middle" align="center" width="60">
</ui-col>
</ui-row>
</ui-nav-bar>
<view style="height:{{NAV_HEIGHT}}"></view>
<view class="sample_title">渐变颜色</view>
<view class="sample_content">
<ui-count-up from=1 to=100 from-color="#FA7474" to-color="#3399ff"></ui-count-up>
</view>
<view class="sample_title">保留2位小数</view>
<view class="sample_content">
<ui-count-up from=1.531 to=100.424 duration="1000" fixed=2></ui-count-up>
</view>
<view class="sample_title">持续时间</view>
<view class="sample_content">
<ui-count-up from=1 to=100 duration="5000"></ui-count-up>
</view>
<view class="sample_title">自定义样式</view>
<view class="sample_content self_style">
<view class="bg-box" style="">
<view class="bg bg1"></view>
<view class="bg bg2"></view>
<view class="bg bg3"></view>
<view class="bg bg4"></view>
<view class="line line1"></view>
<view class="line line2"></view>
<view class="line line3"></view>
<view class="line line4"></view>
</view>
<ui-count-up digit=4 from=0 to=1520 duration=1000 number-style="{{numberStyle}}"></ui-count-up>
</view>
</view>
</template>
<script>
export default {
config: {
"navigationBarTitleText": "数字动画"
},
data : {
NAV_HEIGHT:wx.STATUS_BAR_HEIGHT+wx.DEFAULT_HEADER_HEIGHT+'px',
numberStyle:{
color:'#1DA1D2',
fontSize:'30px',
letterSpacing: '18px',
zIndex: '2',
position: 'absolute',
left: '18px',
top: '10px'
}
},
navigateBack () {
wx.navigateBack()
}
}
</script>
<style lang="less">
.self_style{
position:relative;
height: 100px;
background-color: #03061f;
.bg-box{
position:absolute;
width:200px;
height:35px;
left:14px;
top:8px;
.bg{
background-color: rgba(18,26,49,1);
height:35px;
z-index:1;
float:left;
width:26px;
}
.bg1{
margin-right:9px;
}
.bg2{
margin-right:8px;
}
.bg3{
margin-right:9px;
}
.line{
width: 26px;
height: 1px;
background: #3e4969;
position:absolute;
top:18px;
}
.line1{
margin-right:9px;
}
.line2{
left:35px;
}
.line3{
left:68px;
}
.line4{
left:104px;
}
}
}
</style>
================================================
FILE: pages/componentDemo/demo.js
================================================
export default
{ "result": "{\"A\":[{\"currencyId\":6,\"currencyName\":\"澳门元（OMP)\",\"name\":\"澳门元（OMP)\",\"rate\":1.0000,\"del\":false},{\"currencyId\":12,\"currencyName\":\"阿联酋迪拉姆（AED)\",\"name\":\"阿联酋迪拉姆（AED)\",\"rate\":1.0000,\"del\":false},{\"currencyId\":22,\"currencyName\":\"澳大利亚元(AUD)\",\"name\":\"澳大利亚元(AUD)\",\"rate\":1.0000,\"del\":false},{\"currencyId\":30,\"currencyName\":\"阿尔及利亚第纳尔（DZD）\",\"name\":\"阿尔及利亚第纳尔（DZD）\",\"rate\":1.0000,\"del\":false}],\"B\":[{\"currencyId\":9,\"currencyName\":\"白俄罗斯卢布(BYR)\",\"name\":\"白俄罗斯卢布(BYR)\",\"rate\":1.0000,\"del\":false},{\"currencyId\":13,\"currencyName\":\"波兰兹罗提(PLN)\",\"name\":\"波兰兹罗提(PLN)\",\"rate\":1.0000,\"del\":false},{\"currencyId\":33,\"currencyName\":\"巴西雷亚尔（BRL）\",\"name\":\"巴西雷亚尔（BRL）\",\"rate\":1.0000,\"del\":false}],\"C\":[],\"D\":[{\"currencyId\":14,\"currencyName\":\"丹麦克朗（DKK）\",\"name\":\"丹麦克朗（DKK）\",\"rate\":1.0000,\"del\":false}],\"E\":[{\"currencyId\":8,\"currencyName\":\"俄罗斯卢布(RUB)\",\"name\":\"俄罗斯卢布(RUB)\",\"rate\":1.0000,\"del\":false}],\"F\":[],\"G\":[{\"currencyId\":5,\"currencyName\":\"港币（HKD）\",\"name\":\"港币（HKD）\",\"rate\":1.0000,\"del\":false}],\"H\":[{\"currencyId\":24,\"currencyName\":\"韩元（KRW）\",\"name\":\"韩元（KRW）\",\"rate\":1.0000,\"del\":false}],\"I\":[],\"J\":[{\"currencyId\":23,\"currencyName\":\"加拿大元（CAD）\",\"name\":\"加拿大元（CAD）\",\"rate\":1.0000,\"del\":false}],\"K\":[{\"currencyId\":37,\"currencyName\":\"克罗地亚库纳(HRK)\",\"name\":\"克罗地亚库纳(HRK)\",\"rate\":1.0000,\"del\":false}],\"L\":[{\"currencyId\":34,\"currencyName\":\"立陶宛立特(LTL)\",\"name\":\"立陶宛立特(LTL)\",\"rate\":1.0000,\"del\":false},{\"currencyId\":38,\"currencyName\":\"罗马尼亚列伊(RON)\",\"name\":\"罗马尼亚列伊(RON)\",\"rate\":1.0000,\"del\":false}],\"M\":[{\"currencyId\":2,\"currencyName\":\"美元（USD）\",\"name\":\"美元（USD）\",\"rate\":6.2879,\"del\":false},{\"currencyId\":18,\"currencyName\":\"墨西哥比索（MXN）\",\"name\":\"墨西哥比索（MXN）\",\"rate\":1.0000,\"del\":false},{\"currencyId\":28,\"currencyName\":\"马来西亚林吉特（MYR）\",\"name\":\"马来西亚林吉特（MYR）\",\"rate\":1.0000,\"del\":false},{\"currencyId\":35,\"currencyName\":\"蒙古图格里克(MNT)\",\"name\":\"蒙古图格里克(MNT)\",\"rate\":1.0000,\"del\":false},{\"currencyId\":36,\"currencyName\":\"缅甸缅元（BUK）\",\"name\":\"缅甸缅元（BUK）\",\"rate\":1.0000,\"del\":false}],\"N\":[{\"currencyId\":16,\"currencyName\":\"挪威克朗（NOK）\",\"name\":\"挪威克朗（NOK）\",\"rate\":1.0000,\"del\":false},{\"currencyId\":29,\"currencyName\":\"南非兰特（ZAR）\",\"name\":\"南非兰特（ZAR）\",\"rate\":1.0000,\"del\":false}],\"O\":[{\"currencyId\":3,\"currencyName\":\"欧元（EUR）\",\"name\":\"欧元（EUR）\",\"rate\":7.8234,\"del\":false}],\"P\":[],\"Q\":[],\"R\":[{\"currencyId\":1,\"currencyName\":\"人民币（CNY）\",\"name\":\"人民币（CNY）\",\"rate\":1.0000,\"del\":false},{\"currencyId\":15,\"currencyName\":\"瑞典克朗（SEK）\",\"name\":\"瑞典克朗（SEK）\",\"rate\":1.0000,\"del\":false},{\"currencyId\":19,\"currencyName\":\"瑞士法郎（CHF）\",\"name\":\"瑞士法郎（CHF）\",\"rate\":1.0000,\"del\":false},{\"currencyId\":25,\"currencyName\":\"日元（JPY）\",\"name\":\"日元（JPY）\",\"rate\":1.0000,\"del\":false}],\"S\":[{\"currencyId\":26,\"currencyName\":\"沙特里亚尔（SAR）\",\"name\":\"沙特里亚尔（SAR）\",\"rate\":1.0000,\"del\":false}],\"T\":[{\"currencyId\":17,\"currencyName\":\"土耳其里拉（TRY）\",\"name\":\"土耳其里拉（TRY）\",\"rate\":1.0000,\"del\":false}],\"U\":[],\"V\":[],\"W\":[],\"X\":[{\"currencyId\":7,\"currencyName\":\"新台币（TWD）\",\"name\":\"新台币（TWD）\",\"rate\":1.0000,\"del\":false},{\"currencyId\":20,\"currencyName\":\"新加坡元（SGD）\",\"name\":\"新加坡元（SGD）\",\"rate\":1.0000,\"del\":false},{\"currencyId\":21,\"currencyName\":\"新西兰元（NZD）\",\"name\":\"新西兰元（NZD）\",\"rate\":1.0000,\"del\":false},{\"currencyId\":27,\"currencyName\":\"匈牙利福林（HUF）\",\"name\":\"匈牙利福林（HUF）\",\"rate\":1.0000,\"del\":false}],\"Y\":[{\"currencyId\":4,\"currencyName\":\"英镑（GBP）\",\"name\":\"英镑（GBP）\",\"rate\":8.9150,\"del\":false},{\"currencyId\":10,\"currencyName\":\"印尼卢比(IDR)\",\"name\":\"印尼卢比(IDR)\",\"rate\":1.0000,\"del\":false},{\"currencyId\":11,\"currencyName\":\"印度卢比(INR)\",\"name\":\"印度卢比(INR)\",\"rate\":1.0000,\"del\":false},{\"currencyId\":32,\"currencyName\":\"伊拉克第纳尔（IQD）\",\"name\":\"伊拉克第纳尔（IQD）\",\"rate\":1.0000,\"del\":false}],\"Z\":[{\"currencyId\":31,\"currencyName\":\"智利比索（CLP）\",\"name\":\"智利比索（CLP）\",\"rate\":1.0000,\"del\":false}]}", "common": [{ "currencyId": 1, "currencyName": "人民币（CNY）", "name": "人民币（CNY）", "rate": 1.0000, "del": false }, { "currencyId": 2, "currencyName": "美元（USD）", "name": "美元（USD）", "rate": 6.2879, "del": false }, { "currencyId": 3, "currencyName": "欧元（EUR）", "name": "欧元（EUR）", "rate": 7.8234, "del": false }, { "currencyId": 4, "currencyName": "英镑（GBP）", "name": "英镑（GBP）", "rate": 8.9150, "del": false }], "error_code": 0 }
================================================
FILE: pages/componentDemo/divider.wx
================================================
<template>
<view>
<ui-nav-bar slot="nav-bar" custom-style="{{ {borderBottom:'1px solid rgba(231, 231, 231, 0.6)',backgroundColor:'#fff'} }}">
<ui-row height="46">
<ui-col vertical-align="middle" align="center" width="60" bindtap="navigateBack">
<ui-icon type="arrow-left" size="16" color="#333"></ui-icon>
</ui-col>
<ui-col vertical-align="middle" align="center">
<view>分隔符</view>
</ui-col>
<ui-col vertical-align="middle" align="center" width="60">
</ui-col>
</ui-row>
</ui-nav-bar>
<view style="height:{{NAV_HEIGHT}}"></view>
<view>
<ui-divider>我是有底线的</ui-divider>
<ui-divider padding="20">我是有底线的</ui-divider>
<ui-divider color="#ff2a00">我是红色的底线</ui-divider>
<ui-divider color="#3399ff">我是蓝色的底线</ui-divider>
<ui-divider color="#a1e76a">我是绿色的底线</ui-divider>
<ui-divider color="#ff2a00">
<view style="color:#ff2a00">
内容也是红色的
</view>
</ui-divider>
<ui-divider color="#3399ff">
<view style="color:#3399ff">
内容也是蓝色的
</view>
</ui-divider>
<ui-divider color="#a1e76a">
<view style="color:#a1e76a">
内容也是绿色的
</view>
</ui-divider>
</view>
</view>
</template>
<script>
export default {
config: {
navigationBarTitleText: '分隔符'
},
data: {
NAV_HEIGHT:wx.STATUS_BAR_HEIGHT+wx.DEFAULT_HEADER_HEIGHT+'px'
},
navigateBack () {
wx.navigateBack()
}
}
</script>
<style>
</style>
================================================
FILE: pages/componentDemo/fixedView.wx
================================================
<template>
<view>
<!-- 自定义导航 -->
<ui-nav-bar slot="nav-bar" custom-style="{{ {boxShadow: '0 0px 16px 0 #ccc',backgroundColor:'#fff'} }}">
<ui-row height="46" >
<ui-col vertical-align="middle" align="center" width="60" bindtap="navigateBack">
<ui-icon type="arrow-left" size="16" color="#333"></ui-icon>
</ui-col>
<ui-col vertical-align="middle" align="center">
<view>位置固定容器</view>
</ui-col>
<ui-col vertical-align="middle" align="center" width="60">
</ui-col>
</ui-row>
</ui-nav-bar>
<!-- 设置内容距离nav-bar高度占位 -->
<view style="height:{{NAV_HEIGHT}}"></view>
<ui-fixed-view top="146" left="50">
<view class="fixed-view-content">左上固定</view>
</ui-fixed-view>
<ui-fixed-view top="146" right="50">
<view class="fixed-view-content">右上固定</view>
</ui-fixed-view>
<ui-fixed-view bottom="100" left="50">
<view class="fixed-view-content">左下固定</view>
</ui-fixed-view>
<ui-fixed-view bottom="100" right="50">
<view class="fixed-view-content">右下固定</view>
</ui-fixed-view>
<ui-fixed-view top="{{ fixedTop }}" left="0" right="0">
<view class="fixed-view-content">顶部固定</view>
</ui-fixed-view>
<ui-fixed-view bottom="0" left="0" right="0">
<view class="fixed-view-content">底部固定</view>
</ui-fixed-view>
<view class="content_list">
<view wx:for="{{ items }}" wx:key="index" class="{{ index % 2 == 0 ? 'grey-bg': '' }}">
{{ item }}
</view>
</view>
</view>
</template>
<script>
let items = []
for (let i = 1; i <= 100; i++) {
items.push(`列表项目${i}`)
}
export default {
config: {
navigationBarTitleText: "fixed-view组件"
},
data: {
NAV_HEIGHT:wx.STATUS_BAR_HEIGHT+wx.DEFAULT_HEADER_HEIGHT+'px',
items: items
},
navigateBack () {
wx.navigateBack()
}
};
</script>
<style lang="less">
.fixed-view-content {
padding: 0 6px;
height: 60px;
line-height: 60px;
text-align: center;
color: #fff;
background-color: #FFA060;
z-index: 99;
}
</style>
================================================
FILE: pages/componentDemo/fixedView2.wx
================================================
<!--fixedView2.ui-->
<template>
<!-- 自定义导航 -->
<ui-nav-bar slot="nav-bar" custom-style="{{ {boxShadow: '0 0px 16px 0 #ccc',backgroundColor:'#fff'} }}">
<ui-row height="46" >
<ui-col vertical-align="middle" align="center" width="60" bindtap="navigateBack">
<ui-icon type="arrow-left" size="16" color="#333"></ui-icon>
</ui-col>
<ui-col vertical-align="middle" align="center">
<view>进货车</view>
</ui-col>
<ui-col vertical-align="middle" align="center" width="60">
</ui-col>
</ui-row>
</ui-nav-bar>
<!-- 设置内容距离nav-bar高度占位 -->
<view style="height:{{NAV_HEIGHT}}"></view>
<ui-row height="40" class="fixed_top" wx:if="{{isShow}}">
<ui-col align="center" vertical-align="middle" width="50" bindtap="show">
<ui-icon type="cancel" size="20" color="#fff"></ui-icon>
</ui-col>
<ui-col vertical-align="middle">
拼货规则为24小时一场，每日21点开始。
</ui-col>
</ui-row>
<view class="shop_view">
<view wx:for="{{ arry }}" class="shop_list" wx:for-item="i">{{i}}号商品</view>
</view>
<ui-fixed-view bottom="0" left="0" right="0">
<ui-row height="50" class="fixed_bottom" >
<ui-col align="right" vertical-align="middle" space-right="10">
<view>合计：¥575.37</view>
<view style="color:#FE6A3C;">（满1200元可免邮费）</view>
</ui-col>
<ui-col vertical-align="middle" width="120">
<view class="form_list">提交订单</view>
</ui-col>
</ui-row>
<view class="iphonex-bottom"></view>
</ui-fixed-view>
</template>
<script>
// fixedView2.js
export default {
config: {
navigationBarTitleText: "进货车",
},
data: {
NAV_HEIGHT:wx.STATUS_BAR_HEIGHT+wx.DEFAULT_HEADER_HEIGHT+'px',
arry: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
isShow: true
},
show () {
this.setData({
isShow:false
})
},
navigateBack () {
wx.navigateBack()
}
}
</script>
<style lang="less">
.iphonex-bottom{
padding-bottom: env(safe-area-inset-bottom);
}
// fixedView2.less
.shop_view{
padding-bottom: 50px;
}
.shop_list{
height: 100px;
border-bottom: 1px solid #DBDBDB;
line-height: 100px;
padding-left: 20px;
}
.fixed_top{
background: #FF774F;
.ui-col{
color: #fff;
}
}
.fixed_bottom{
background: #fff;
box-shadow: 0 0px 15px 0 #eaeaea;
.form_list{
background: #FE6A3C;
color: #fff;
height: 50px;
text-align: center;
line-height: 50px;
font-size: 14px;
}
}
</style>
================================================
FILE: pages/componentDemo/icon.wx
================================================
<!--icon.ui-->
<template>
<view>
<ui-nav-bar slot="nav-bar" custom-style="{{ {borderBottom:'1px solid rgba(231, 231, 231, 0.6)',backgroundColor:'#fff'} }}">
<ui-row height="46">
<ui-col vertical-align="middle" align="center" width="60" bindtap="navigateBack">
<ui-icon type="arrow-left" size="16" color="#333"></ui-icon>
</ui-col>
<ui-col vertical-align="middle" align="center">
<view>图标库</view>
</ui-col>
<ui-col vertical-align="middle" align="center" width="60">
</ui-col>
</ui-row>
</ui-nav-bar>
<view style="height:{{NAV_HEIGHT}}"></view>
<view class="sample_title">自定义尺寸</view>
<view class="sample_content">
<ui-row>
<ui-col align="center" vertical-align="middle">
<ui-icon type="ring" size="16"></ui-icon>
</ui-col>
<ui-col align="center" vertical-align="middle">
<ui-icon type="ring" size="24"></ui-icon>
</ui-col>
<ui-col align="center" vertical-align="middle">
<ui-icon type="ring" size="32"></ui-icon>
</ui-col>
<ui-col align="center" vertical-align="middle">
<ui-icon type="ring" size="40"></ui-icon>
</ui-col>
</ui-row>
</view>
<view class="sample_title">自定义颜色</view>
<view class="sample_content">
<ui-row>
<ui-col align="center" vertical-align="middle">
<ui-icon type="ring" size="32" color="#09BB07"></ui-icon>
</ui-col>
<ui-col align="center" vertical-align="middle">
<ui-icon type="ring" size="32" color="#3399FF"></ui-icon>
</ui-col>
<ui-col align="center" vertical-align="middle">
<ui-icon type="ring" size="32" color="#FFBE00"></ui-icon>
</ui-col>
<ui-col align="center" vertical-align="middle">
<ui-icon type="ring" size="32" color="#F43530"></ui-icon>
</ui-col>
</ui-row>
</view>
<view class="sample_title">微信图标</view>
<view class="sample_content iconbox">
<icon type="success" size="24"></icon>
<icon type="info" size="24"></icon>
<icon type="warn" size="24"></icon>
<icon type="waiting" size="24"></icon>
<icon type="safe_warn" size="24"></icon>
<icon type="circle" size="24"></icon>
<icon type="download" size="24"></icon>
<icon type="cancel" size="24"></icon>
<icon type="search" size="24"></icon>
<icon type="clear" size="24"></icon>
</view>
</view>
</template>
<script>
export default {
config: {
"navigationBarTitleText": "图标库"
},
data : {
NAV_HEIGHT:wx.STATUS_BAR_HEIGHT+wx.DEFAULT_HEADER_HEIGHT+'px',
},
navigateBack () {
wx.navigateBack()
}
}
</script>
<style lang="less">
.iconbox{
icon{
margin:0 5px;
}
}
</style>
================================================
FILE: pages/componentDemo/indexList.wx
================================================
<!--indexList.ui-->
<template>
<view>
<ui-nav-bar slot="nav-bar" custom-style="{{ {borderBottom:'1px solid rgba(231, 231, 231, 0.6)',backgroundColor:'#fff'} }}">
<ui-row height="46">
<ui-col vertical-align="middle" align="center" width="60" bindtap="navigateBack">
<ui-icon type="arrow-left" size="16" color="#333"></ui-icon>
</ui-col>
<ui-col vertical-align="middle" align="center">
<view>表单</view>
</ui-col>
<ui-col vertical-align="middle" align="center" width="60">
</ui-col>
</ui-row>
</ui-nav-bar>
<view style="height:{{NAV_HEIGHT}}"></view>
<view class="sample_title">
城市选择
</view>
<view class="sample_content" bindtap="showIndexList1">
<text style="font-size: 14px;">{{country1}}</text>
<ui-icon type="arrow-down"></ui-icon>
</view>
<view class="sample_title">
自定义数据格式
</view>
<view class="sample_content" bindtap="showIndexList4">
<text style="font-size: 14px;">{{currency}}</text>
<ui-icon type="arrow-down"></ui-icon>
</view>
</view>
</template>
<script>
// indexList.js
export default {
config: {
"navigationBarTitleText": "索引选择器"
},
data : {
NAV_HEIGHT:wx.STATUS_BAR_HEIGHT+wx.DEFAULT_HEADER_HEIGHT+'px',
country1: '北京',
country2: '宝马',
country3: '阿强',
currency: '澳元(OPM)'
},
navigateBack () {
wx.navigateBack()
},
showIndexList1 () {
wx.navigateTo({
url: `/pages/componentDemo/indexList1?country=${this.data.country1}`
})
},
showIndexList4 () {
wx.navigateTo({
url: '/pages/componentDemo/indexList4'
})
},
}
</script>
<style lang="less">
</style>
================================================
FILE: pages/componentDemo/indexList1.wx
================================================
<template>
<view class="ui-dialog-content">
<ui-nav-bar class="ui-dialog-header">
<ui-row height="46">
<ui-col align="center" vertical-align="middle" width="50" bindtap="navigateBack">
<ui-icon type="arrow-left" size="16" color="#333"></ui-icon>
</ui-col>
<ui-col vertical-align="middle" align="center" space="20">
<view class="search">
<ui-icon type="magnifier" size="16"></ui-icon>{{ search }}
</view>
</ui-col>
<ui-col vertical-align="middle" align="center" width="100">
</ui-col>
</ui-row>
</ui-nav-bar>
<view style="height:{{NAV_HEIGHT}}"></view>
<view class="ui-dialog-body">
<ui-index-list
height="{{conHeight}}"
show-top data={{list}} bindcustomtap="singleselect">
<view class="top_box">
<view class="top1">
<text>当前：{{country}}</text>
</view>
<view>
<view class="title">定位</view>
<view class="position" bindtap="positionTap">
<ui-icon type="home-map" color="#00ab48"></ui-icon>
{{position}}</view>
</view>
<view class="top2">
<view class="title">热门城市</view>
<ui-tags
data="{{tagsData}}"
bindchange="singleTap"
fixed-width
col-number="4"
></ui-tags>
</view>
</view>
</ui-index-list>
</view>
</view>
</template>
<script>
// import mydata from './demo.js'
const tagStyle = `
font-size: 14px;
margin-top: 10px;
border-radius: 4px;
color: #666;
background-color:#fff;
border:1px solid #f1f1f1;
line-height:35px;
text-align:center;
`
export default {
config: {
disableScroll:true
},
data : {
conHeight:wx.DEFAULT_CONTENT_HEIGHT,
NAV_HEIGHT:wx.STATUS_BAR_HEIGHT+wx.DEFAULT_HEADER_HEIGHT+'px',
list: [
{
index: 'A',
items: [
{ name: '鞍山' },
{ name: '安庆' },
{ name: '安阳' },
{ name: '安康' },
{ name: '安丘' },
{ name: '安顺' },
{ name: '阿克苏' },
{ name: '阿拉尔' },
{ name: '阿拉善盟' },
{ name: '安化' },
{ name: '安吉' }
]
}, {
index: 'B',
items: [
{ name: '北京' },
{ name: '保定' },
{ name: '包头' },
{ name: '宝鸡' },
{ name: '蚌埠' },
{ name: '滨州' },
{ name: '亳州' },
{ name: '白城' },
{ name: '百色' },
{ name: '白山' },
{ name: '白银' }
]
}, {
index: 'C',
items: [
{ name: '成都' },
{ name: '重庆' },
{ name: '长春' },
{ name: '长沙' },
{ name: '沧州' },
{ name: '常德' },
{ name: '常熟' },
{ name: '长治' },
{ name: '承德' },
{ name: '郴州' },
{ name: '赤峰' }
]
}, {
index: 'D',
items: [
{ name: '大连' },
{ name: '东莞' },
{ name: '大庆' },
{ name: '大同' },
{ name: '丹东' },
{ name: '达州' },
{ name: '德阳' },
{ name: '德州' },
{ name: '东营' },
{ name: '大丰' },
{ name: '大理' }
]
}, {
index: 'E',
items: [
{ name: '鄂尔多斯' },
{ name: '恩平' },
{ name: '恩施' },
{ name: '鄂州' },
{ name: '峨眉山' },
{ name: '额尔古纳' }
]
}, {
index: 'F',
items: [
{ name: '佛山' },
{ name: '福州' },
{ name: '抚顺' },
{ name: '阜阳' },
{ name: '抚州' },
{ name: '肥城' },
{ name: '奉化' },
{ name: '丰城' },
{ name: '肥乡' },
{ name: '凤城' },
{ name: '封丘' }
]
}, {
index: 'G',
items: [
{ name: '广州' },
{ name: '贵阳' },
{ name: '赣州' },
{ name: '贵港' },
{ name: '桂林' },
{ name: '高碑店' },
{ name: '高密' },
{ name: '巩义' },
{ name: '广安' },
{ name: '广元' },
{ name: '盖州' }
]
}, {
index: 'H',
items: [
{ name: '杭州' },
{ name: '哈尔滨' },
{ name: '合肥' },
{ name: '海口' },
{ name: '邯郸' },
{ name: '衡阳' },
{ name: '淮安' },
{ name: '呼和浩特' },
{ name: '惠州' },
{ name: '湖州' },
{ name: '衡水' }
]
}, {
index: 'J',
items: [
{ name: '济南' },
{ name: '江门' },
{ name: '江阴' },
{ name: '嘉兴' },
{ name: '吉林' },
{ name: '荆州' },
{ name: '金华' },
{ name: '济宁' },
{ name: '佳木斯' },
{ name: '焦作' },
{ name: '揭阳' }
]
}, {
index: 'K',
items: [
{ name: '昆明' },
{ name: '昆山' },
{ name: '开封' },
{ name: '开化' },
{ name: '开阳' },
{ name: '库车' },
{ name: '奎屯' },
{ name: '库尔勒' },
{ name: '开平' },
{ name: '克州' },
{ name: '克拉玛依' }
]
}, {
index: 'L',
items: [
{ name: '兰州' },
{ name: '连云港' },
{ name: '临析' },
{ name: '柳州' },
{ name: '洛阳' },
{ name: '廊坊' },
{ name: '拉萨' },
{ name: '乐山' },
{ name: '聊城' },
{ name: '辽阳' },
{ name: '临汾' }
]
}, {
index: 'M',
items: [
{ name: '绵阳' },
{ name: '马鞍山' },
{ name: '牡丹江' },
{ name: '眉山' },
{ name: '茂名' },
{ name: '梅州' },
{ name: '麻城' },
{ name: '满洲里' },
{ name: '孟津' },
{ name: '孟州' },
{ name: '蒙阴' }
]
}, {
index: 'N',
items: [
{ name: '南京' },
{ name: '南宁' },
{ name: '宁波' },
{ name: '南通' },
{ name: '南昌' },
{ name: '南阳' },
{ name: '南充' },
{ name: '宁德' },
{ name: '内江' },
{ name: '宁海' },
{ name: '南和' }
]
}, {
index: 'P',
items: [
{ name: '莆田' },
{ name: '盘锦' },
{ name: '平顶山' },
{ name: '濮阳' },
{ name: '攀枝花' },
{ name: '沛县' },
{ name: '蓬莱' },
{ name: '彭州' },
{ name: '平度' },
{ name: '平湖' },
{ name: '平阳' }
]
}, {
index: 'Q',
items: [
{ name: '青岛' },
{ name: '秦皇岛' },
{ name: '泉州' },
{ name: '清远' },
{ name: '齐齐哈尔' },
{ name: '曲靖' },
{ name: '衢州' },
{ name: '迁安' },
{ name: '潜江' },
{ name: '庆阳' },
{ name: '青州' }
]
}, {
index: 'R',
items: [
{ name: '日照' },
{ name: '荣成' },
{ name: '如东' },
{ name: '瑞安' },
{ name: '乳山' },
{ name: '汝州' },
{ name: '仁怀' },
{ name: '任丘' },
{ name: '仁寿' },
{ name: '瑞昌' },
{ name: '瑞金' }
]
}, {
index: 'S',
items: [
{ name: '上海' },
{ name: '深圳' },
{ name: '沈阳' },
{ name: '石家庄' },
{ name: '苏州' },
{ name: '三亚' },
{ name: '汕头' },
{ name: '绍兴' },
{ name: '商丘' },
{ name: '上饶' },
{ name: '韶关' }
]
}, {
index: 'T',
items: [
{ name: '天津' },
{ name: '太原' },
{ name: '泰州' },
{ name: '台州' },
{ name: '唐山' },
{ name: '泰安' },
{ name: '太仓' },
{ name: '桐乡' },
{ name: '泰山' },
{ name: '天水' },
{ name: '滕州' }
]
}, {
index: 'W',
items: [
{ name: '武汉' },
{ name: '温州' },
{ name: '无锡' },
{ name: '潍坊' },
{ name: '威海' },
{ name: '芜湖' },
{ name: '乌鲁木齐' },
{ name: '渭南' },
{ name: '温岭' },
{ name: '吴江' },
{ name: '万州' }
]
}, {
index: 'X',
items: [
{ name: '西安' },
{ name: '厦门' },
{ name: '襄阳' },
{ name: '徐州' },
{ name: '咸阳' },
{ name: '孝感' },
{ name: '湘潭' },
{ name: '邢台' },
{ name: '西宁' },
{ name: '信阳' },
{ name: '许昌' }
]
}, {
index: 'Y',
items: [
{ name: '盐城' },
{ name: '扬州' },
{ name: '烟台' },
{ name: '宜昌' },
{ name: '银川' },
{ name: '岳阳' },
{ name: '阳江' },
{ name: '宜宾' },
{ name: '营口' },
{ name: '宜春' },
{ name: '义乌' }
]
}, {
index: 'Z',
items: [
{ name: '郑州' },
{ name: '湛江' },
{ name: '镇江' },
{ name: '中山' },
{ name: '珠海' },
{ name: '株洲' },
{ name: '枣庄' },
{ name: '淄博' },
{ name: '张家口' },
{ name: '漳州' },
{ name: '周口' }
]
}
],
tagsData:[{
text: '广州',
tagStyle: tagStyle
}, {
text: '上海',
tagStyle: tagStyle
}, {
text: '成都',
tagStyle: tagStyle
}, {
text: '深圳',
tagStyle: tagStyle
}, {
text: '杭州',
tagStyle: tagStyle
}, {
text: '郑州',
tagStyle: tagStyle
},{
text: '西安',
tagStyle: tagStyle
}, {
text: '南京',
tagStyle: tagStyle
}, {
text: '武汉',
tagStyle: tagStyle
}, {
text: '深圳',
tagStyle: tagStyle
}, {
text: '杭州',
tagStyle: tagStyle
}, {
text: '郑州',
tagStyle: tagStyle
}
],
alpha: '',
place: '北京',
search: '输入城市名或拼音查询',
country: '',
position:'定位中……',
isTap:false
},
tapTag(e){
let city = e.currentTarget.dataset.city
var pages = getCurrentPages()
var currPage = pages[pages.length - 1]; //当前页面
var prevPage = pages[pages.length - 2];
prevPage.setData({
country1:city
})
wx.navigateBack()
},
singleselect (msg) {
var pages = getCurrentPages()
var currPage = pages[pages.length - 1]; //当前页面
var prevPage = pages[pages.length - 2];
prevPage.setData({
country1:msg.detail.name
})
wx.navigateBack()
},
positionTap(){
if(this.data.isTap){
let place = this.data.position
var pages = getCurrentPages()
var currPage = pages[pages.length - 1]; //当前页面
var prevPage = pages[pages.length - 2];
prevPage.setData({
country1:this.data.position
})
wx.navigateBack()
}else{
return false
}
},
singleTap(e){
let index = e.detail.index
var pages = getCurrentPages()
var currPage = pages[pages.length - 1]; //当前页面
var prevPage = pages[pages.length - 2];
prevPage.setData({
country1:this.data.tagsData[index].text
})
wx.navigateBack()
},
getPosition(){
wx.request({
url: 'https://apis.map.qq.com/ws/location/v1/ip',
data: {
key: 'RHGBZ-S2LAU-5MRV7-4QPTZ-JI25K-HVBDV'
},
success: (res) => {
console.log(res.data.result.ad_info.city)
this.setData({
position:res.data.result.ad_info.city,
isTap:true
})
}
})
},
navigateBack () {
wx.navigateBack()
},
onLoad(options){
this.getPosition()
console.log(options,'options')
this.setData({
country:options.country
})
},
onReady(options){
this.getPosition()
}
}
</script>
<style lang="less">
.top_box{
height:310px;
background-color:#f7f7f7;
padding-bottom:20px;
border-bottom: 1px solid #ece3e3;
.top1{
background-color:#fff;
line-height:40px;
padding:0 10px;
}
.position{
background-color: #fff;
padding:5px 15px;
display: inline-block;
margin:0 10px;
border-radius:3px;
border:1px solid #f1f1f1;
}
.title{
font-size:12px;
color:#999;
padding:0 10px;
margin:10px 0;
}
.top2{
margin:0 10px;
}
}
.tag1{
font-size: 14px;
padding: 6px 22rpx;
border: 1px solid #ff5800;
margin-top: 10px;
border-radius: 4px;
color: #ff5800;
}
.tag2{
font-size: 14px;
padding: 6px 22px;
border: 1px solid #ccc;
margin-top: 10px;
border-radius: 4px;
color: #666;
display: inline-block;
margin-right: 10px;
}
.now-city .now-city-name {
display: flex;
background: white;
font-size: 15px;
line-height: 1.0;
letter-spacing: 0.4px;
color: #333333;
padding: 6px 16rpx;
border: solid 1px #dbdbdb;
margin-top: 9px;
}
.icon-ser {
position: absolute;
left: 25px;
top: 0;
z-index: 9;
}
.search{
width:100%;
height:30px;
border-radius:20px;
border:1px solid #ccc;
line-height:30px;
}
.ui-dialog-header {
background-color: #F9F9F9;
.head_title{
width: 100%;
font-size: 14px;
color: #454648;
line-height: 30px;
border-radius: 20px;
background-color: #EBECEE;
.ui-icon{
line-height:30px;
}
}
}
.btn_win{
padding: 0 10px;
}
</style>
================================================
FILE: pages/componentDemo/indexList4.wx
================================================
<template>
<view>
<ui-nav-bar slot="nav-bar" custom-style="{{ {borderBottom:'1px solid rgba(231, 231, 231, 0.6)',backgroundColor:'#fff'} }}">
<ui-row height="46">
<ui-col vertical-align="middle" align="center" width="60" bindtap="navigateBack">
<ui-icon type="arrow-left" size="16" color="#333"></ui-icon>
</ui-col>
<ui-col vertical-align="middle" align="center">
<view>自定义数据格式</view>
</ui-col>
<ui-col vertical-align="middle" align="center" width="60">
</ui-col>
</ui-row>
</ui-nav-bar>
<view style="height:{{NAV_HEIGHT}}"></view>
<ui-index-list bindcustomtap="tapHandler" data="{{list}}" height="{{conHeight}}">
</ui-index-list>
</view>
</template>
<script>
import mydata from './demo.js'
export default {
config: {
disableScroll:true
},
onLoad () {
let obj = JSON.parse(mydata.result)
console.log(obj)
let objIndex=[
'A', 'B', 'C', 'D', 'E', 'F', 'G',
'H', 'I', 'J', 'K', 'L', 'M', 'N',
'O', 'P', 'Q', 'R', 'S', 'T', 'U',
'V', 'W', 'X', 'Y', 'Z'
]
objIndex.forEach((item, index) => {
if (obj[item].length>0){
let content = {
index: item,
items: obj[item]
}
this.data.list.push(content)
}
});
console.log(this.data.list,'123')
this.setData({
list: this.data.list
})
},
data: {
conHeight:wx.DEFAULT_CONTENT_HEIGHT,
NAV_HEIGHT:wx.STATUS_BAR_HEIGHT+wx.DEFAULT_HEADER_HEIGHT+'px',
list: []
},
tapHandler (msg) {
var pages = getCurrentPages()
var currPage = pages[pages.length - 1]; //当前页面
var prevPage = pages[pages.length - 2];
prevPage.setData({
currency:msg.detail.name
})
wx.navigateBack()
},
navigateBack () {
wx.navigateBack()
}
}
</script>
<style>
</style>
================================================
FILE: pages/componentDemo/map/getLocation.wx
================================================
<!--getLocation.ui-->
<template>
<view>
<ui-nav-bar slot="nav-bar" custom-style="{{ {borderBottom:'1px solid rgba(231, 231, 231, 0.6)',backgroundColor:'#fff'} }}">
<ui-row height="46">
<ui-col vertical-align="middle" align="center" width="60" bindtap="navigateBack">
<ui-icon type="arrow-left" size="16" color="#333"></ui-icon>
</ui-col>
<ui-col vertical-align="middle" align="center">
<view>获取位置并查看</view>
</ui-col>
<ui-col vertical-align="middle" align="center" width="60">
</ui-col>
</ui-row>
</ui-nav-bar>
<view style="height:{{NAV_HEIGHT}}"></view>
<view class="sample_content">
<ui-row height="40" space="10">
<ui-col span="2" vertical-align="middle">
纬度：
</ui-col>
<ui-col span="10">
<input type="text" value="{{latitude}}"></input>
</ui-col>
</ui-row>
<ui-row height="40" space="10">
<ui-col span="2" vertical-align="middle">
经度：
</ui-col>
<ui-col span="10">
<input type="text" value="{{longitude}}"></input>
</ui-col>
</ui-row>
<button type="primary" bindtap="getLocation">获取位置</button>
<button bindtap="openLocation">查看位置</button>
</view>
</view>
</template>
<script>
import amapFile from "../../../static/map/amap-wx"
var key = '4216f7d550dc95ef4ac91e3c0ee6a19a'
export default {
config: {
"navigationBarTitleText": "获取位置并查看"
},
data :{
NAV_HEIGHT:wx.STATUS_BAR_HEIGHT+wx.DEFAULT_HEADER_HEIGHT+'px',
latitude: '',
longitude: '',
location: {},
hasLocation: false,
textDatas: {}
},
navigateBack () {
wx.navigateBack()
},
getLocation () {
wx.getLocation({
type: 'gcj02',
success: (res) => {
this.setData({
location: {
latitude: res.latitude,
longitude: res.longitude
},
longitude: res.longitude,
latitude: res.latitude,
hasLocation: true
})
this.getLocalInfo()
},
fail: (res) => {
}
})
},
getLocalInfo () {
var myAmapFun = new amapFile.AMapWX({ key: key })
myAmapFun.getRegeo({
location: `${this.data.longitude},${this.data.latitude}`,
success: (data) => {
console.log(data)
// 调用成功则将相关数据存储至textData
this.setData({
textDatas: {
name: data[0].regeocodeData.formatted_address,
address: data[0].name,
latitude: data[0].latitude,
longitude: data[0].longitude
}
})
},
fail: (info) => {
console.log(info)
}
})
},
openLocation () {
if (!this.data.hasLocation) return
wx.openLocation({
longitude: Number(this.data.longitude),
latitude: Number(this.data.latitude),
name: this.data.textDatas.name,
address: this.data.textDatas.address,
scale: 16,
success:function(data){
console.log(data)
},
fail:function(data){
console.log(data)
}
})
// wx.openSysMap({
// latitude: Number(this.longitude),
// longitude: Number(this.latitude),
// name: this.textDatas.name,
// success: function(res) {
// },
// fail: function(res) {
// },
// complete: function(res) {
// }
// })
}
}
</script>
<style lang="less">
.tips {
padding: 20px 0;
text-align: center
}
button{
margin-top:10px;
}
input{
border:1px solid #ccc;
border-radius:5px;
line-height:36px;
height:36px;
padding-left:10px;
}
</style>
================================================
FILE: pages/componentDemo/map/mapDemo.wx
================================================
<template>
<view>
<ui-nav-bar slot="nav-bar" custom-style="{{ {borderBottom:'1px solid rgba(231, 231, 231, 0.6)',backgroundColor:'#fff'} }}">
<ui-row height="46">
<ui-col vertical-align="middle" align="center" width="60" bindtap="navigateBack">
<ui-icon type="arrow-left" size="16" color="#333"></ui-icon>
</ui-col>
<ui-col vertical-align="middle" align="center">
<view>自定义标点和气泡</view>
</ui-col>
<ui-col vertical-align="middle" align="center" width="60">
</ui-col>
</ui-row>
</ui-nav-bar>
<view style="height:{{NAV_HEIGHT}}"></view>
<map
id="map"
map-service="tencent"
longitude="{{longitude}}"
latitude="{{latitude}}"
scale="{{scale}}"
show-location="{{showLocation}}"
markers="{{markers}}"
controls="{{controls}}"
bindcontroltap="controltap"
bindregionchange="regionchange"
bindcallouttap="callouttap"
style="width:100%;height:93vh;">
</map>
</view>
</template>
<script>
var pathIcon = '/images/path.png'
export default {
config: {
"navigationBarTitleText": "自定义标点和气泡"
},
data:{
NAV_HEIGHT:wx.STATUS_BAR_HEIGHT+wx.DEFAULT_HEADER_HEIGHT+'px',
latitude: 39.855060,
longitude: 116.368650,
scale: 18,
showLocation: true,
mapCtx: null,
markers: [
{
id: 1,
latitude: 39.855060,
longitude: 116.368650,
iconPath: '/images/posi.png',
label: {
fontSize: 12,
color: '#FF0000',
content: '',
x: 0.5,
y: 0.5
},
callout: {
content: '北京引领视觉科技有限公司',
color: '#000000',
fontSize: 16,
bgColor: '#ffffff',
borderRadius: 10,
display: 'ALWAYS',
padding: 6,
// boxShadow: '0 0 1px 1px rgba(0,0,0,.2)'
},
width: 30,
height: 40
}, {
id: 2,
latitude: 39.851297,
longitude: 116.368175,
iconPath: '/images/qcsc_ic_location_pin.png',
label: {
fontSize: 12,
color: '#FF0000',
content: '',
x: 0.5,
y: 0.5
},
callout: {
content: `在这里上车`,
color: '#000000',
fontSize: 16,
bgColor: '#ffffff',
borderRadius: 14,
display: 'ALWAYS',
padding: 8,
boxShadow: '0 0 4px 1px rgba(0,0,0,.1)'
},
width: 22,
height: 54
}, {
id: 3,
latitude: 39.858620,
longitude: 116.369580,
iconPath: '/images/trip_hotelreuse_map_poi_around_info_stations_selected.png',
label: {
content: '点击查看详情',
fontSize: 12,
color: '#FF0000'
},
callout: {
content: `右安门翠林小区二里`,
color: '#000000',
fontSize: 16,
bgColor: '#ffffff',
borderRadius: 5,
display: 'BYCLICK',
padding: 8,
boxShadow: '0 0 4px 1px rgba(0,0,0,.1)'
},
width: 32,
height: 45
}],
controls: [{
id: 1,
iconPath: '/images/location.png',
clickable: true,
position: {
left: 15,
top: 570,
width: 64,
height: 64
}
}],
controls: [{
id: 1,
iconPath: '/images/location.png',
clickable: true,
position: {
left: 15,
top: wx.DEFAULT_CONTENT_HEIGHT - 100,
width: 64,
height: 64
}
}],
circles: [{
latitude: 39.855060,
longitude: 116.368650,
color: '#0000FF33',
fillColor: '#0000FF33',
radius: 100,
strokeWidth: 1
}]
},
onReady () {
this.mapCtx = wx.createMapContext('map')
},
controltap (e) {
console.log('点击controltap',e)
if (e.controlId === 1) {
this.mapCtx.moveToLocation()
}
},
regionchange () {
},
callouttap (e) {
console.log('callouttap',e)
// if (e.markerId === 2) return
// if (e.markerId === 1) {
// this.toSysMap(39.855060, 116.368650, '北京引领视觉科技有限公司')
// }
// if (e.markerId === 3) {
// this.toSysMap(39.858620, 116.369580, '右安门翠林小区二里')
// }
},
toSysMap (lat, lng, names) {
wx.openSysMap({
latitude: lat,
longitude: lng,
name: names,
success: function (res) {
},
fail: function (res) {
},
complete: function (res) {
}
})
},
navigateBack () {
wx.navigateBack()
}
}
</script>
<style lang="less">
// mapDemo.less
.c-wrap {
display: flex;
justify-content: space-between;
align-items: center;
}
.info {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
margin-right: 25px;
p {
padding: 0 5px;
}
}
.a-name {
font-size: 14px;
color: #000;
line-height: 20px;
}
.a-info {
font-size: 12px;
color: #000;
line-height: 16px;
}
.click {
position: absolute;
left: calc(100% - 6px);
top: 0;
width: 50px;
height: 100%;
background-color: #FF6600;
line-height: 48px;
color: #fff;
text-align: center;
font-size: 16px;
border-radius: 0 10px 10px 0;
}
.s-map {
display: flex;
justify-content: space-between;
align-items: center;
}
.s-name {
margin-right: 10px;
font-size: 16px;
}
.btn{
height: 25px;
padding: 0 5px;
background-color: #3783fe;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
img {
width: 16px;
height: 16px;
margin-right: 3px;
}
span {
font-size: 13px;
color: #fff;
}
}
</style>
================================================
FILE: pages/componentDemo/map/mapDraw.wx
================================================
<template>
<view class="map-wrap">
<ui-nav-bar slot="nav-bar" custom-style="{{ {borderBottom:'1px solid rgba(231, 231, 231, 0.6)',backgroundColor:'#fff'} }}">
<ui-row height="46">
<ui-col vertical-align="middle" align="center" width="60" bindtap="navigateBack">
<ui-icon type="arrow-left" size="16" color="#333"></ui-icon>
</ui-col>
<ui-col vertical-align="middle" align="center">
<view>地图绘制</view>
</ui-col>
<ui-col vertical-align="middle" align="center" width="60">
</ui-col>
</ui-row>
</ui-nav-bar>
<view style="height:{{NAV_HEIGHT}}"></view>
<map
id="map"
map-service="tencent"
longitude="{{longitude}}"
latitude="{{latitude}}"
scale="{{scale}}"
polyline="{{polyline}}"
show-location="{{showLocation}}"
controls="{{controls}}"
circles="{{circles}}"
bindcontroltap="controltap"
bindregionchange="regionchange"
bindcallouttap="callouttap"
style="width:100%;height:93vh;">
</map>
</view>
</template>
<script>
// mapDemo.js
// mapDemo02.js
var pathIcon = '/images/path.png'
export default {
config: {
"navigationBarTitleText": "地图绘制"
},
data: {
NAV_HEIGHT:wx.STATUS_BAR_HEIGHT+wx.DEFAULT_HEADER_HEIGHT+'px',
latitude: 39.855060,
longitude: 116.368650,
scale: 18,
showLocation: true,
mapCtx: null,
polyline: [
{
points: [
{
latitude: 39.853332,
longitude: 116.371028
},
{
latitude: 39.854864,
longitude: 116.371179
},
{
latitude: 39.856289,
longitude: 116.370293
},
{
latitude: 39.855897,
longitude: 116.368909
}
],
color: '#ff0000',
width: 2,
dottedLine: true
}
],
controls: [{
id: 1,
iconPath: '/images/location.png',
clickable: true,
position: {
left: 15,
top: 570,
width: 64,
height: 64
}
}],
controls: [{
id: 1,
iconPath: '/images/location.png',
clickable: true,
position: {
left: 15,
top: wx.DEFAULT_CONTENT_HEIGHT - 100,
width: 64,
height: 64
}
}],
circles: [{
latitude: 39.855060,
longitude: 116.368650,
color: '#0000FF33',
fillColor: '#0000FF33',
radius: 100,
strokeWidth: 1
}]
},
navigateBack () {
wx.navigateBack()
},
onReady () {
this.mapCtx = wx.createMapContext('map')
},
controltap (e) {
if (e.controlId === 1) {
this.mapCtx.moveToLocation()
}
},
regionchange () {
},
callouttap (e) {
if (e.markerId === 2) return
if (e.markerId === 1) {
this.toSysMap(39.855060, 116.368650, '北京引领视觉科技有限公司')
}
if (e.markerId === 3) {
this.toSysMap(39.858620, 116.369580, '右安门翠林小区二里')
}
},
toSysMap (lat, lng, names) {
wx.openSysMap({
latitude: lat,
longitude: lng,
name: names,
success: function (res) {
},
fail: function (res) {
},
complete: function (res) {
}
})
},
go () {
}
}
</script>
<style lang="less">
// mapDemo.less
.c-wrap {
display: flex;
justify-content: space-between;
align-items: center;
}
.info {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
margin-right: 25px;
p {
padding: 0 5px;
}
}
.a-name {
font-size: 14px;
color: #000;
line-height: 20px;
}
.a-info {
font-size: 12px;
color: #000;
line-height: 16px;
}
.click {
position: absolute;
left: calc(100% - 6px);
top: 0;
width: 50px;
height: 100%;
background-color: #FF6600;
line-height: 48px;
color: #fff;
text-align: center;
font-size: 16px;
border-radius: 0 10px 10px 0;
}
.s-map {
display: flex;
justify-content: space-between;
align-items: center;
}
.s-name {
margin-right: 10px;
font-size: 16px;
}
.btn{
height: 25px;
padding: 0 5px;
background-color: #3783fe;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
img {
width: 16px;
height: 16px;
margin-right: 3px;
}
span {
font-size: 13px;
color: #fff;
}
}
</style>
================================================
FILE: pages/componentDemo/map/trajectory.wx
================================================
<!--trajectory.ui-->
<template>
<view>
<ui-nav-bar slot="nav-bar" custom-style="{{ {borderBottom:'1px solid rgba(231, 231, 231, 0.6)',backgroundColor:'#fff'} }}">
<ui-row height="46">
<ui-col vertical-align="middle" align="center" width="60" bindtap="navigateBack">
<ui-icon type="arrow-left" size="16" color="#333"></ui-icon>
</ui-col>
<ui-col vertical-align="middle" align="center">
<view>轨迹移动缩放</view>
</ui-col>
<ui-col vertical-align="middle" align="center" width="60">
</ui-col>
</ui-row>
</ui-nav-bar>
<view style="height:{{NAV_HEIGHT}}"></view>
<view class="map-wrap">
<map
id="map"
longitude="{{longitude}}"
latitude="{{latitude}}"
scale="{{scale}}"
show-location="{{showLocation}}"
markers="{{markers}}"
polyline="{{polyline}}"
style="width:100%;height:{{height-100}}px;">
</map>
</view>
<view class="bottom">
<button type="primary" bindtap="move">点击开始导航</button>
</view>
</view>
</template>
<script>
export default {
config: {
"navigationBarTitleText": "轨迹移动缩放",
"disableScroll":true
},
data :{
NAV_HEIGHT:wx.STATUS_BAR_HEIGHT+wx.DEFAULT_HEADER_HEIGHT+'px',
latitude: 39.855060,
longitude: 116.368650,
scale: 18,
showLocation: true,
mapCtx: null,
moveBtnClick: true,
back: false,
polyline: [{
points: [{
latitude: 39.855745,
longitude: 116.368432
}, {
latitude: 39.856264,
longitude: 116.370331
}, {
latitude: 39.856462,
longitude: 116.371404
}, {
latitude: 39.853212,
longitude: 116.371388
}],
color: '#FF0000DD',
width: 2,
dottedLine: true
}],
markers: [{
id: 0,
latitude: 39.855745,
longitude: 116.368432,
iconPath: '/images/car.png',
width: 30,
height: 30,
rotate: 100,
anchor: {
x: 0.5,
y: 0.5
}
}, {
id: 1,
latitude: 39.855745,
longitude: 116.368432,
iconPath: '/images/posi.png',
callout: {
content: '路径A',
color: '#000000',
fontSize: 12,
bgColor: '#ffffff',
borderRadius: 11,
display: 'BYCLICK',
padding: 5
},
width: 30,
height: 40
}, {
id: 2,
latitude: 39.856264,
longitude: 116.370331,
iconPath: '/images/posi.png',
callout: {
content: '路径B',
color: '#000000',
fontSize: 12,
bgColor: '#ffffff',
borderRadius: 11,
display: 'BYCLICK',
padding: 5
},
width: 30,
height: 40
}, {
id: 3,
latitude: 39.856462,
longitude: 116.371404,
iconPath: '/images/posi.png',
callout: {
content: '路径C',
color: '#000000',
fontSize: 12,
bgColor: '#ffffff',
borderRadius: 11,
display: 'BYCLICK',
padding: 5
},
width: 30,
height: 40
}, {
id: 4,
latitude: 39.853212,
longitude: 116.371388,
iconPath: '/images/posi.png',
callout: {
content: '路径D',
color: '#000000',
fontSize: 12,
bgColor: '#ffffff',
borderRadius: 11,
display: 'BYCLICK',
padding: 5
},
width: 30,
height: 40
}],
controls: [{
id: 2,
iconPath: '/images/location.png',
clickable: true,
position: {
left: 15,
top: 570,
width: 64,
height: 64
}
}],
circles: [{
latitude: 39.855060,
longitude: 116.368650,
color: '#0000FF33',
fillColor: '#0000FF33',
radius: 100,
strokeWidth: 1
}],
height:wx.DEFAULT_CONTENT_HEIGHT
},
onReady () {
this.mapCtx = wx.createMapContext('map')
},
navigateBack () {
wx.navigateBack()
},
move () {
this.mapCtx.includePoints({
padding: [10],
points: [{
latitude: 39.855745,
longitude: 116.368432
}, {
latitude: 39.856264,
longitude: 116.370331
}]
})
if (!this.data.moveBtnClick) return
this.data.moveBtnClick = false
var mapCtx = wx.createMapContext('map')
// 声明汽车运动轨迹
var path = [{
latitude: 39.855745,
longitude: 116.368432
}, {
latitude: 39.856264,
longitude: 116.370331
}, {
latitude: 39.856462,
longitude: 116.371404
}, {
latitude: 39.853212,
longitude: 116.371388
}]
if (this.data.back) path.reverse()
mapCtx.translateMarker({
markerId: 0,
destination: path[1],
autoRotate: true,
duration: 4000,
rotate:10,
animationEnd: () => {
this.mapCtx.includePoints({
padding: [10],
points: [{
latitude: 39.856264,
longitude: 116.370331
}, {
latitude: 39.856462,
longitude: 116.371404
}]
})
mapCtx.translateMarker({
markerId: 0,
destination: path[2],
autoRotate: true,
rotate:120,
duration: 4000,
animationEnd: () => {
this.mapCtx.includePoints({
padding: [100,10,100,10],
points: [{
latitude: 39.856462,
longitude: 116.371404
}, {
latitude: 39.853212,
longitude: 116.371388
}]
})
mapCtx.translateMarker({
markerId: 0,
destination: path[3],
autoRotate: true,
rotate:300,
duration: 4000,
animationEnd: () => {
this.data.back = !this.data.back
this.data.moveBtnClick = true
}
})
}
})
}
})
}
}
</script>
<style lang="less">
.bottom{
width: 100%;
padding: 20px 10px;
left: 0;
}
</style>
================================================
FILE: pages/componentDemo/mapService/mapSearchInput.wx
================================================
<!--mapSearchInput.ui-->
<template>
<view>
<ui-nav-bar slot="nav-bar" custom-style="{{ {borderBottom:'1px solid rgba(231, 231, 231, 0.6)',backgroundColor:'#fff'} }}">
<ui-row height="46">
<ui-col vertical-align="middle" align="center" width="60" bindtap="navigateBack">
<ui-icon type="arrow-left" size="16" color="#333"></ui-icon>
</ui-col>
<ui-col vertical-align="middle" align="center">
<view>地图绘制</view>
</ui-col>
<ui-col vertical-align="middle" align="center" width="60">
</ui-col>
</ui-row>
</ui-nav-bar>
<view style="height:{{NAV_HEIGHT}}"></view>
<view class="content">
<view class="btn-area">
<ui-row height="50" border-bottom>
<ui-col width="50" align="center" vertical-align="middle">
<ui-icon type="building" size="24" color="#FD8137"></ui-icon>
</ui-col>
<ui-col vertical-align="middle">{{ text }}</ui-col>
<ui-col width="70" align="center" vertical-align="middle" bindtap="reserveAddr">
<image src="{{src}}" style="width:15px;height:15px;"></image>
<view>我的位置</view>
</ui-col>
</ui-row>
<ui-row height="50">
<ui-col width="50" align="center" vertical-align="middle">
<ui-icon type="qn-activity" size="24" color="#FD8137"></ui-icon>
</ui-col>
<ui-col vertical-align="middle">09月27日</ui-col>
<ui-col vertical-align="middle">今天</ui-col>
<ui-col vertical-align="middle">明天</ui-col>
<ui-col vertical-align="middle">共一晚</ui-col>
</ui-row>
</view>
<view class="btn-area">
<ui-row height="50">
<ui-col width="50" align="center" vertical-align="middle">
<ui-icon type="magnifier" size="24" color="#FD8137"></ui-icon>
</ui-col>
<ui-col vertical-align="middle">
<input placeholder="景点/商圈/关键词" placeholder-style="color:#BBBBBB"></input>
</ui-col>
</ui-row>
</view>
<button class="find" bindtap="toast">查找酒店</button>
</view>
</view>
</template>
<script>
// mapSearchInput.js
import amapFile from "../../../static/map/amap-wx"
var key = '4216f7d550dc95ef4ac91e3c0ee6a19a'
export default {
config: {
"navigationBarTitleText": "获取粗略与精确定位"
},
data : {
NAV_HEIGHT:wx.STATUS_BAR_HEIGHT+wx.DEFAULT_HEADER_HEIGHT+'px',
text: '定位中…',
latitude: '',
longitude: '',
location: '',
src: '/images/pos.png'
},
fn () {
wx.getLocation({
type: 'wgs84',
success: (res) => {
this.data.location = res.latitude+','+ res.longitude
console.log(this.data.location,'location')
},
fail: (err) => {
}
})
},
reserveAddr () {
console.log(this.data.location)
wx.request({
url: 'https://apis.map.qq.com/ws/geocoder/v1/?',
data: {
location:this.data.location,
key: 'RHGBZ-S2LAU-5MRV7-4QPTZ-JI25K-HVBDV'
},
success: (res) => {
console.log(res)
this.setData({
text:res.data.result.address
})
}
})
},
toast () {
wx.showToast({ title: '点击“我的位置”按钮测试',icon:'none' })
},
getPosition(){
wx.request({
url: 'https://apis.map.qq.com/ws/location/v1/ip',
data: {
key: 'RHGBZ-S2LAU-5MRV7-4QPTZ-JI25K-HVBDV'
},
success: (res) => {
console.log(res.data.result.ad_info.city)
// this.text = res.data.result.ad_info.city
this.setData({
text:res.data.result.ad_info.city
})
}
})
},
navigateBack () {
wx.navigateBack()
},
onReady () {
this.getPosition()
this.fn()
}
}
</script>
<style lang="less">
// mapSearchInput.less
.content{
padding: 15px;
}
.btn-area {
// padding: 0px 15px;
box-shadow: 0 0 10px 1px #EBEBEB;
border-radius: 5px;
overflow: hidden;
margin-bottom: 50px;
.ui-image{
margin-bottom: 5px;
}
.ui-input{
border: 0;
}
}
.find{
background-color: #FD8137;
border: 0;
color: #fff;
outline: none;
}
</style>
================================================
FILE: pages/componentDemo/mapService/tencentmap.wx
================================================
<!--mapSearchTips.ui-->
<template>
<view>
<ui-nav-bar slot="nav-bar" custom-style="{{ {borderBottom:'1px solid rgba(231, 231, 231, 0.6)',backgroundColor:'#fff'} }}">
<ui-row height="46">
<ui-col vertical-align="middle" align="center" width="60" bindtap="navigateBack">
<ui-icon type="arrow-left" size="16" color="#333"></ui-icon>
</ui-col>
<ui-col vertical-align="middle" align="center">
<view>地图绘制</view>
</ui-col>
<ui-col vertical-align="middle" align="center" width="60">
</ui-col>
</ui-row>
</ui-nav-bar>
<view style="height:{{NAV_HEIGHT}}"></view>
<view class="querySearch" style="height:{{conHeight}}px" hidden="{{!show}}">
<view class="section {{show?'sectionBack':''}}">
<form action="/search" bindsubmit="bindtap2">
<ui-row>
<ui-col vertical-align="middle">
<input bindinput="bindInput" bindconfirm="bindtap2" focus="{{ show }}" value={{keywords}} type="search" bindfocus="bindfocus" bindblur="bindblur" name="search" placeholder="搜索地点"></ui-input>
</ui-col>
</ui-row>
</form>
</view>
<view bindtap="associationalSearch" data-value="tips" data-index="{{index}}" data-flag="0" data-title = "{{item.title}}" data-keywords="{{item.title}}" wx:for-item="item" data-index="{{index}}" class="text_box" wx:for="{{tips}}">
{{item.title}}
</view>
</view>
<view height="{{conHeight}}">
<view bindtap="searchShow" class="section {{show?'sectionBack':''}}">
<ui-row>
<ui-col vertical-align="middle">
<view class="analogSearch" wx:if="{{keywords === ''}}">搜索地点</view>
<view class="analogSearch" wx:elif="{{keywords !== ''}}">{{analogSearch}}</view>
</ui-col>
</ui-row>
</view>
<ui-popup show="{{ show2 }}" position="bottom" mask-style="{{ { backgroundColor: 'transparent' } }}" hide-on-tap="{{false}}" bindhide="bindhide" bindshow="bindshow">
<view wx:for="{{tips3}}" class="infobox" bindtap="associationalSearch" data-value="tips3" data-index="{{index}}" data-flag="1" data-title = "{{item.title}}">
<ui-row height="25" space="10">
<ui-col vertical-align="middle">
<view>
<text class="info-1">{{item.title}}</text>
<text class="info-2" wx:if="item.type===0"></text>
<text class="info-2" wx:elif="item.type===1">（公交车站）</text>
<text class="info-2" wx:elif="item.type===2">（地铁站)</text>
<text class="info-2" wx:elif="item.type===3">(行政区划)</text>
</view>
</ui-col>
</ui-row>
<ui-row height="20" space="10">
<ui-col vertical-align="middle">
<view class="overflow">
<text class="info-2">{{item.tel}}</text>
</view>
</ui-col>
</ui-row>
<ui-row height="20" space="10">
<ui-col vertical-align="middle">
<ui-mini-star value="4.5"></ui-mini-star>
</ui-col>
</ui-row>
<ui-row height="20" space="10">
<ui-col vertical-align="middle" class="info-3">{{item.address}}</ui-col>
</ui-row>
</view>
</ui-popup>
<!-- <view hidden="{{!show3}}">11111test</view> -->
<ui-fixed-view bottom="0" left="0" right="0" bindtap="toggle" wx:if="{{show3}}">
<view style="width:100%;height:45px;z-index:1;background-color:#fff;width:100%;text-align:center;line-height:45px;" ></view>
查看“{{keywords}}”搜索结果
</ui-fixed-view>
<map
id="map"
map-service="tencent"
height="{{conHeight}}"
markers="{{markers}}"
longitude="{{longitude}}"
latitude="{{latitude}}"
show-location
bindcallouttap="callouttap"
scale="18"
style="width:100%;height:{{conHeight-50}}px;margin-top:50px;">
</map>
</view>
</view>
</template>
<script>
// mapSearchTips.js
var key = '4216f7d550dc95ef4ac91e3c0ee6a19a'
var lonlat
var city
export default {
config: {
"navigationBarTitleText": "腾讯地图webService"
},
data : {
NAV_HEIGHT:wx.STATUS_BAR_HEIGHT+wx.DEFAULT_HEADER_HEIGHT+'px',
conHeight:wx.DEFAULT_CONTENT_HEIGHT,
headerHeight:wx.DEFAULT_HEADER_HEIGHT,
tips: [],
tips2:[],
tips3:[],
keywords: '',
tempKeywords:'',
latitude: 39.855060,
longitude: 116.368650,
analogSearch:'',
show:false,
show2:false,
show3:false,
flag:null,
markers:[]
},
callouttap (e) {
this.toSysMap(39.855060, 116.368650, '北京引领视觉科技有限公司')
},
toSysMap (lat, lng, names) {
wx.openSysMap({
latitude: lat,
longitude: lng,
name: names,
success: function (res) {
},
fail: function (res) {
},
complete: function (res) {
}
})
},
bindhide(){
// this.show3 = true
console.log('显示')
this.setData({
show3:true
})
},
bindshow(){
console.log('隐藏')
// this.show3 = false
this.setData({
show3:false
})
},
toggle(){
// this.show2 = true
this.setData({
show2:true
})
},
bindtap2(){
// this.show2 = true
this.setData({
show2:true,
show:false
})
let that = this
// this.data.analogSearch = this.data.keywords
this.setData({
analogSearch:this.data.keywords
})
wx.request({
url: 'https://apis.map.qq.com/ws/place/v1/search',
data: {
keyword: this.data.keywords,
boundary:'region(北京,0)',
key: 'RHGBZ-S2LAU-5MRV7-4QPTZ-JI25K-HVBDV'
},
success: function (res) {
// that.data.tips3 = res.data.data
that.setData({
tips3:res.data.data
})
console.log(that.data.tips3)
}
})
},
// 输入时请求接口实现联想词
bindInput(e){
console.log(e)
if(e === undefined){
return false
}
this.setData({
keywords:e.detail.value
})
// this.show = true
this.setData({
show:true
})
let that = this
wx.request({
url: 'https://apis.map.qq.com/ws/place/v1/suggestion',
data: {
keyword: this.data.keywords,
region:'北京',
key: 'RHGBZ-S2LAU-5MRV7-4QPTZ-JI25K-HVBDV'
},
success: function (res) {
if(res.data.status === 120){
return false
}else{
// that.data.tips = res.data.data
that.setData({
tips:res.data.data
})
}
}
})
},
// 点击联想词实现搜索
associationalSearch(e){
//获取输入的字符
console.log(e)
let data,index,title,flag
if(e.target.dataset.value === undefined){
data = e.currentTarget.dataset.value
index = e.currentTarget.dataset.index
title = e.currentTarget.dataset.title
flag = e.currentTarget.dataset.flag
}else{
data = e.target.dataset.value
index = e.target.dataset.index
title = e.target.dataset.title
flag = e.target.dataset.flag
}
let that = this
// this.show3 = false
this.setData({
show3:false
})
var keywords = title
console.log(title,keywords)
if(flag === "0"){
// this.analogSearch = keywords
// this.tempKeywords = keywords
// this.flag = 0
this.setData({
analogSearch:keywords,
tempKeywords:keywords,
flag:0
})
console.log(this.data.analogSearch,'this.data.analogSearch')
}else if(flag === "1"){
this.flag = 1
this.data.tempKeywords = keywords
this.setData({
tempKeywords:keywords,
flag:1
})
}
this.latitude = this.data[data][index].location.lat
this.longitude = this.data[data][index].location.lng
this.setData({
latitude:this.data[data][index].location.lat,
longitude:this.data[data][index].location.lng
})
let markersSearch = [
{
id: 1,
latitude: this.data.latitude,
longitude: this.data.longitude,
iconPath: '/images/posi.png',
label: {
fontSize: 12,
color: '#FF0000',
content: '',
x: 0.5,
y: 0.5
},
callout: {
content: `${this.data[data][index].title},${this.data[data][index].address}`,
color: '#000000',
fontSize: 16,
bgColor: '#ffffff',
borderRadius: 10,
display: 'ALWAYS',
padding: 6
},
width: 30,
height: 40
}]
console.log(markersSearch)
// this.data.markers = JSON.parse(JSON.stringify(markersSearch))
this.setData({
markers:JSON.parse(JSON.stringify(markersSearch))
})
console.log(this.data.markers)
// this.show = false
// this.show2= false
// this[data] = []
// this.tips = []
// this.tips2 = []
this.setData({
show:false,
show2:false,
tips:[],
tips2:[]
})
// console.log()
},
// 点击搜索按钮或小键盘上搜索实现搜索
bindtap(){
this.show= false
console.log(this.show)
this.show2= true
let that = this
wx.request({
url: 'http://apis.map.qq.com/ws/place/v1/suggestion',
data: {
keyword: this.keywords,
region:'北京',
key: 'RHGBZ-S2LAU-5MRV7-4QPTZ-JI25K-HVBDV'
},
success: function (res) {
console.log(res.data.data)
that.tips2 = res.data.data
}
})
},
bindfocus(){
this.show = true
console.log('huodejiaodian')
this.bindInput()
},
bindblur(){
this.show = false
console.log(this.show)
},
searchShow(){
console.log('searchShow')
// this.show = true
this.setData({
show:true
})
if(this.data.flag === 0){
// this.keywords = this.tempKeywords
this.setData({
keywords:this.data.tempKeywords
})
}else if(this.data.flag === 1){
return false
}
}
}
</script>
<style lang="less">
// mapSearchTips.less
.analogSearch{
background-color:#fff;
border:1px solid #ccc;
border-radius:5px;
height:33px;
line-height:33px;
padding:0 12px;
color:#797474;
}
.infobox{
padding:10px 20px;
.mix-1px(0, 0, 1, 0, #ccc);
.info-1{
font-size:18px;
padding-right:5px;
}
.overflow{
.mix-text-overflow();
}
.info-2{
font-size:12px;
}
.info-3{
font-size:12px;
color:#666;
}
}
.section {
padding: 5px 20px;
position: absolute;
width: 100%;
height: 46px;
z-index: 9;
input {
width: 100%;
height: 30px;
border-radius: 5px;
outline: none;
}
}
.sectionBack{
background-color:#fff
}
.querySearch{
position: absolute;
width: 100%;
z-index: 9;
background-color:rgba(255,255,255,.8)
}
.text_box {
padding: 10px 20px;
line-height: 20px;
}
.map .section {
margin-bottom: 0;
}
.c-wrap {
display: flex;
justify-content: space-between;
align-items: center;
}
.info {
max-width:180px;
.mix-text-overflow();
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
margin-right: 25px;
p {
padding: 0 5px;
}
}
.a-name {
font-size: 14px;
color: #000;
line-height: 20px;
}
.a-info {
width: 100%;
font-size: 12px;
color: #000;
line-height: 16px;
.mix-text-overflow();
}
.click {
position: absolute;
left: calc(100% - 6px);
top: 0;
width: 50px;
height: 100%;
background-color: #FF6600;
line-height: 48px;
color: #fff;
text-align: center;
font-size: 16px;
border-radius: 0 10px 10px 0;
}
</style>
================================================
FILE: pages/componentDemo/mapsdk/distanceCalculation.wx
================================================
<!--distanceCalculation.ui-->
<template>
<view>
<ui-nav-bar slot="nav-bar" custom-style="{{ {borderBottom:'1px solid rgba(231, 231, 231, 0.6)',backgroundColor:'#fff'} }}">
<ui-row height="46">
<ui-col vertical-align="middle" align="center" width="60" bindtap="navigateBack">
<ui-icon type="arrow-left" size="16" color="#333"></ui-icon>
</ui-col>
<ui-col vertical-align="middle" align="center">
<view>计算距离</view>
</ui-col>
<ui-col vertical-align="middle" align="center" width="60">
</ui-col>
</ui-row>
</ui-nav-bar>
<view style="height:{{NAV_HEIGHT}}"></view>
<view style="height:{{ height-100 }}px">
<map id="navi_map"
class="map"
longitude="{{longitude}}"
latitude="{{latitude}}"
scale="18" markers="{{markers}}"
style="width:100%;height:{{ height-100 }}px">
</map>
</view>
<ui-fixed-view bottom="0" left="0" right="0">
<view class="map_text">
<ui-row height="30" >
<ui-col span="3">起点坐标：</ui-col>
<ui-col span="9">{{froms.longitude}} - {{froms.latitude}}</ui-col>
</ui-row>
<ui-row height="30">
<ui-col span="3">终点坐标：</ui-col>
<ui-col span="9">{{to.longitude}} - {{to.latitude}}</ui-col>
</ui-row>
<ui-row height="30">
<ui-col span="3">相隔距离：</ui-col>
<ui-col span="9">{{distance}}米</ui-col>
</ui-row>
</view>
</ui-fixed-view>
</view>
</template>
<script>
// distanceCalculation.js
import QQMapWX from "../../../static/map/qqmap-wx-jssdk.min"
var qqkey = 'RHGBZ-S2LAU-5MRV7-4QPTZ-JI25K-HVBDV'
var list = []
export default {
config: {
"navigationBarTitleText": "计算距离"
},
data: {
NAV_HEIGHT:wx.STATUS_BAR_HEIGHT+wx.DEFAULT_HEADER_HEIGHT+'px',
mapHeight: wx.DEFAULT_CONTENT_HEIGHT - 35 + 'px',
latitude: 39.853212,
longitude: 116.371388,
froms: {},
to: {},
distance: 0,
mapCTX: null,
markers: [{
iconPath: '/images/mapicon_navi_s.png',
id: 0,
latitude: 39.853212,
longitude: 116.371388,
width: 23,
height: 33
}, {
iconPath: '/images/mapicon_navi_e.png',
id: 0,
latitude: 39.855060,
longitude: 116.368650,
width: 24,
height: 34
}],
height:wx.DEFAULT_CONTENT_HEIGHT
},
onReady () {
// 组件挂载完成后执行初始化
this.init()
},
init () {
// 调用QQMapWX构造函数构建map对象挂载到组件data中
this.mapCTX = new QQMapWX({key: qqkey})
// 调用calculateDistance方法获取数据
// 详见touch-ui文档腾讯地图SDK距离计算
this.mapCTX.calculateDistance({
from: {
latitude: 39.853312,
longitude: 116.371488
},
to: [{
location: {
lat: 39.853212,
lng: 116.371388
}
}],
success: (res) => {
// 接口调用成功则执行更新数据事件
this.refreshData(res)
},
fail: (res) => {
// 失败则执行此逻辑
},
complete: () => {
// 成功与否都会执行此逻辑
}
})
},
// 更新组件数据事件
refreshData (response) {
list = response.result.elements[0]
this.setData({
froms: {
latitude: list.from.lat,
longitude: list.from.lng
},
to: {
latitude: list.to.lat,
longitude: list.to.lng
},
distance: list.distance
})
},
navigateBack () {
wx.navigateBack()
}
}
</script>
<style lang="less">
.map {
height: 100%
}
.map_text{
width: 100%;
height: 100px;
bottom:0;
left: 0;
padding: 10px;
background: #fff;
box-shadow: 0 0 25px 0 #cccccc;
.ui-text{
line-height: 25px;
}
}
</style>
================================================
FILE: pages/componentDemo/mapsdk/drawStaticMap.wx
================================================
<!--drawStaticMap.ui-->
<template>
<view>
<ui-nav-bar slot="nav-bar" custom-style="{{ {borderBottom:'1px solid rgba(231, 231, 231, 0.6)',backgroundColor:'#fff'} }}">
<ui-row height="46">
<ui-col vertical-align="middle" align="center" width="60" bindtap="navigateBack">
<ui-icon type="arrow-left" size="16" color="#333"></ui-icon>
</ui-col>
<ui-col vertical-align="middle" align="center">
<view>绘制静态图</view>
</ui-col>
<ui-col vertical-align="middle" align="center" width="60">
</ui-col>
</ui-row>
</ui-nav-bar>
<view style="height:{{NAV_HEIGHT}}"></view>
<view class="img_box" style="height:{{height}}px">
<image src="{{src}}"></image>
</view>
</view>
</template>
<script>
import amapFile from "../../../static/map/amap-wx"
var key = '4216f7d550dc95ef4ac91e3c0ee6a19a'
export default {
config: {
"navigationBarTitleText": "绘制静态图"
},
data: {
NAV_HEIGHT:wx.STATUS_BAR_HEIGHT+wx.DEFAULT_HEADER_HEIGHT+'px',
src: '',
myAmapFun: null,
height:wx.DEFAULT_CONTENT_HEIGHT
},
onReady () {
// 挂载完成后执行初始化静态图事件
this.initStacticMap()
},
navigateBack () {
wx.navigateBack()
},
// 初始化静态图事件
initStacticMap () {
// 调用amapFile.AMapWX构造函数创建myAmapFun实例对象
this.myAmapFun = new amapFile.AMapWX({ key: key })
// 调用ui.getSystemInfo获取设备信息
wx.getSystemInfo({
success: (data) => {
// 获取设备浏览器宽高
var height = data.windowHeight
var width = data.windowWidth
var size = width + '*' + height
// 执行绘制静态图事件
this.getStaticMap(size)
}
})
},
// 绘制事件图事件
getStaticMap (size) {
this.myAmapFun.getStaticmap({
zoom: 10,
size: size,
scale: 2,
location: '116.38482,39.94858',
// 绘制点参数
markers: 'large,0xFF0000,起:116.31604,39.96491|large,0x008000,终:116.39361,39.936957',
// 绘制标签参数
labels: '朝阳公园,2,0,32,0xFFFFFF,0x008000:116.48482,39.94858',
// 绘制线段和区域参数
paths: '10,0x0000ff,1,,:116.31604,39.96491;116.320816,39.966606;116.321785,39.966827;116.32361,39.966957;116.39361,39.966957;116.39361,39.936957|10,0x0000ff,0.1,0xFFFF00,0.7:116.32248,39.896833;116.427537,39.901837;116.378442,39.864691',
success: (data) => {
// 调用成功则执行此函数逻辑
this.setData({
src: data.url
})
},
fail: (info) => {
}
})
}
}
</script>
<style lang="less">
// drawStaticMap.less
.img_box{
image{
width: 100%;
height: 100%;
}
}
</style>
================================================
FILE: pages/componentDemo/mapsdk/interestPointAroud.wx
================================================
<!--interestPointAroud.ui-->
<template>
<view>
<ui-nav-bar slot="nav-bar" custom-style="{{ {borderBottom:'1px solid rgba(231, 231, 231, 0.6)',backgroundColor:'#fff'} }}">
<ui-row height="46">
<ui-col vertical-align="middle" align="center" width="60" bindtap="navigateBack">
<ui-icon type="arrow-left" size="16" color="#333"></ui-icon>
</ui-col>
<ui-col vertical-align="middle" align="center">
<view>周围兴趣点</view>
</ui-col>
<ui-col vertical-align="middle" align="center" width="60">
</ui-col>
</ui-row>
</ui-nav-bar>
<view style="height:{{NAV_HEIGHT}}"></view>
<view class="map_container" style="height:{{height-100}}px">
<map
class="map"
id="map"
longitude="{{longitude}}"
latitude="{{latitude}}"
scale="18"
markers="{{markers}}"
show-location
bindmarkertap="makertap"
style="width:100%;height:{{height-100}}px">
</map>
</view>
<ui-fixed-view bottom="0" right="0" left="0">
<view class="map_text" >
<text>{{textData.name}}</text>
<text>{{textData.desc}}</text>
<view></view>
</view>
</ui-fixed-view>
</view>
</template>
<script>
import amapFile from "../../../static/map/amap-wx"
var key = '4216f7d550dc95ef4ac91e3c0ee6a19a'
var markersData = []
export default {
config: {
"navigationBarTitleText": "周围兴趣点"
},
data : {
NAV_HEIGHT:wx.STATUS_BAR_HEIGHT+wx.DEFAULT_HEADER_HEIGHT+'px',
markers: [],
latitude: '',
longitude: '',
textData: {},
city: '',
height:wx.DEFAULT_CONTENT_HEIGHT
},
makertap: function (e) {
var id = e.markerId
var that = this
that.showMarkerInfo(markersData, id)
that.changeMarkerColor(markersData, id)
},
navigateBack () {
wx.navigateBack()
},
onLoad: function (e) {
var that = this
var myAmapFun = new amapFile.AMapWX({ key: key })
var params = {
iconPathSelected: '/images/posi.png',
iconPath: '/images/marker.png',
success: function (data) {
markersData = data.markers
var poisData = data.poisData
var markersNew = []
markersData.forEach(function (item, index) {
markersNew.push({
id: item.id,
latitude: item.latitude,
longitude: item.longitude,
iconPath: item.iconPath,
width: item.width,
height: item.height
})
})
if (markersData.length > 0) {
that.setData({
markers: markersNew
})
that.setData({
city: poisData[0].cityname || ''
})
that.setData({
latitude: markersData[0].latitude
})
that.setData({
longitude: markersData[0].longitude
})
that.showMarkerInfo(markersData, 0)
}
},
fail: function (info) {
}
}
myAmapFun.getPoiAround(params)
},
showMarkerInfo: function (data, i) {
var that = this
that.setData({
textData: {
name: data[i].name,
desc: data[i].address
}
})
},
changeMarkerColor: function (data, i) {
var that = this
var markers = []
for (var j = 0; j < data.length; j++) {
if (j === i) {
data[j].iconPath = '/images/posi.png'
} else {
data[j].iconPath = '/images/marker.png'
}
markers.push({
id: data[j].id,
latitude: data[j].latitude,
longitude: data[j].longitude,
iconPath: data[j].iconPath,
width: data[j].width,
height: data[j].height
})
}
that.setData({
markers: markers
})
},
onReady () {
this.onLoad()
}
}
</script>
<style lang="less">
.map {
height: 100%
}
.map_text{
width: 100%;
height: 100px;
bottom:0;
left: 0;
padding: 10px;
background: #fff;
box-shadow: 0 0 25px 0 #cccccc;
.ui-text{
line-height: 25px;
}
}
</style>
================================================
FILE: pages/componentDemo/mapsdk/mapComprehensive.wx
================================================
<!--mapComprehensive.ui-->
<template>
<view>
<ui-nav-bar slot="nav-bar" custom-style="{{ {borderBottom:'1px solid rgba(231, 231, 231, 0.6)',backgroundColor:'#fff'} }}">
<ui-row height="46">
<ui-col vertical-align="middle" align="center" width="60" bindtap="navigateBack">
<ui-icon type="arrow-left" size="16" color="#333"></ui-icon>
</ui-col>
<ui-col vertical-align="middle" align="center">
<view>地址逆解析</view>
</ui-col>
<ui-col vertical-align="middle" align="center" width="60">
</ui-col>
</ui-row>
</ui-nav-bar>
<view style="height:{{NAV_HEIGHT}}"></view>
<view class="map_container" style="height:{{height-140}}px">
<map
id="map"
longitude="{{longitude}}"
latitude="{{latitude}}"
scale="14"
markers="{{markers}}"
controls="{{controls}}"
bindcontroltap="controltap"
show-location
bindmarkertap="makertap"
style="width:100%;height:{{height-140}}px">
</map>
</view>
<view class="bot">
<view class="map_text border">
<view class="pic">
<image src="{{src}}"></image>
</view>
<view class="shop-info">
<view class="shop-name">{{textData.name}}</view>
<view class="judge">
<ui-mini-star value="4.1" width="73"></ui-mini-star>
</view>
<view class="shop-addr">{{textData.address}}</view>
</view>
</view>
<ui-row height="50" bindtap="open">
<ui-col space-left="10" vertical-align="middle">
<view>预计到达时间10分钟</view>
</ui-col>
<ui-col space-right="10" vertical-align="middle" width="100">
<button type="primary">查看路线</button>
</ui-col>
</ui-row>
</view>
</view>
</template>
<script>
// mapComprehensive.js
import amapFile from "../../../static/map/amap-wx"
var key = '4216f7d550dc95ef4ac91e3c0ee6a19a'
var icon = '/images/ic_map_mode.png',
iconActive = '/images/ic_map_mode_active.png'
export default {
config: {
"navigationBarTitleText": "地址逆解析"
},
data: {
NAV_HEIGHT:wx.STATUS_BAR_HEIGHT+wx.DEFAULT_HEADER_HEIGHT+'px',
src: '/images/shop-1.png',
markers: [{
id: 1,
latitude: 39.855745,
longitude: 116.368432,
iconPath: iconActive,
width: 23,
height: 30
}, {
id: 2,
latitude: 39.867277,
longitude: 116.368475,
iconPath: icon,
width: 23,
height: 30
}, {
id: 3,
latitude: 39.857755,
longitude: 116.364870,
iconPath: icon,
width: 23,
height: 30
}, {
id: 4,
latitude: 39.851907,
longitude: 116.376114,
iconPath: icon,
width: 23,
height: 30
}, {
id: 5,
latitude: 39.863898,
longitude: 116.375256,
iconPath: icon,
width: 23,
height: 30
}],
latitude: 39.855745,
longitude: 116.368432,
textData: {},
controls: [{
id: 0, // 设置当前控件id,且唯一
iconPath: '/images/location.png',
clickable: true,
position: {
left: 15,
top: 450,
width: 64,
height: 64
}
}],
city: '',
starData: [],
mapHeight: wx.DEFAULT_CONTENT_HEIGHT + 'px',
height:wx.DEFAULT_CONTENT_HEIGHT
},
onReady () {
var obj = {
latitude: 39.855745,
longitude: 116.368432
}
this.reserveAddr(obj)
},
// 标记点markers点击事件
makertap (e) {
console.log(e)
var markerId = e.markerId
// 执行标记点活动事件
this.markerActive(markerId)
// 执行更新信息事件
this.infoChange(markerId)
},
// 标记点活动事件
markerActive (id) {
// 遍历marker数组若每一项的id与传过来的参数id相等 那么将该项的图标变为活动状态
var a = this.data.markers.map((item, index) => {
return item.id === id ? {
id: item.id,
latitude: item.latitude,
longitude: item.longitude,
iconPath: iconActive,
width: item.width,
height: item.height
} : {
id: item.id,
latitude: item.latitude,
longitude: item.longitude,
iconPath: icon,
width: item.width,
height: item.height
}
})
this.setData({
markers: a
})
},
// 更新信息事件
infoChange (id) {
var current = this.data.markers.filter((item, index) => {
return item.id === id
})[0]
this.reserveAddr(current)
},
reserveAddr (markerObj) {
// 调用amapFile.AMapWX构造函数创建myAmapFun实例
var myAmapFun = new amapFile.AMapWX({ key: key })
// 根据参数的坐标值,调用getRegeo方法逆解析地址
myAmapFun.getRegeo({
location: `${markerObj.longitude},${markerObj.latitude}`,
success: (data) => {
// 调用成功则将相关数据存储至textData
this.setData({
textData: {
name: data[0].regeocodeData.formatted_address,
address: data[0].name,
latitude: data[0].latitude,
longitude: data[0].longitude
}
})
}
})
},
// 点击文本详情跳转本机地图查看事件
open () {
// 调用ui.openLocation方法打开本机地图查看
wx.openLocation({
backgroundColor: '#fff',
color:'#000',
longitude: Number(this.data.textData.longitude),
latitude: Number(this.data.textData.latitude),
name: this.data.textData.name,
address: this.data.textData.address,
scale: 16
})
},
controltap (e) {
var mapCtx = wx.createMapContext('map')
if (e.controlId === 0) {
// 调用获取的map对象的移动地图中心点到定位点方法
mapCtx.moveToLocation()
}
},
navigateBack () {
wx.navigateBack()
}
}
</script>
<style lang="less">
.map_container {
position: relative;
}
.h1 {
margin: 8px 0;
font-size:15px;
}
.info {
margin: 5px 0;
display: block;
font-size:12px;
}
.map_text {
height: 86px;
padding: 8px 10px;
display: flex;
justify-content: space-around;
align-items: center;
box-shadow:0 -4px 1px 0 rgba(204, 204, 204,.2);
}
.border {
.mix-1px (0, 0, 1, 0, #aaa);
}
.pic {
width: 70px;
height: 70px;
.ui-image {
width: 100%;
height: 100%;
}
}
.shop-info {
width: 278px;
height: 69px;
}
.shop-name {
font-size: 14px;
line-height: 14px;
}
.shop-addr {
font-size: 10px;
line-height: 10px;
}
.bot {
width: 100%;
position: absolute;
left: 0;
bottom: 0;
background: #ffffff;
}
.judge {
margin: 5px 0 8px;
}
</style>
================================================
FILE: pages/componentDemo/mapsdk/mapSearchTips.wx
================================================
<!--mapSearchTips.ui-->
<template>
<view>
<ui-nav-bar slot="nav-bar" custom-style="{{ {borderBottom:'1px solid rgba(231, 231, 231, 0.6)',backgroundColor:'#fff'} }}">
<ui-row height="46">
<ui-col vertical-align="middle" align="center" width="60" bindtap="navigateBack">
<ui-icon type="arrow-left" size="16" color="#333"></ui-icon>
</ui-col>
<ui-col vertical-align="middle" align="center">
<view>搜索位置并查看</view>
</ui-col>
<ui-col vertical-align="middle" align="center" width="60">
</ui-col>
</ui-row>
</ui-nav-bar>
<view style="height:{{NAV_HEIGHT}}"></view>
<view class="prevent-screen" hidden="{{!prevent}}"></view>
<view class="section">
<input bindinput="bindInput" placeholder="搜索" value={{keywords}}></input>
</view>
<view wx:if="{{tips.length > 0}}" bindtap="bindSearch" data-keywords="{{item.name}}" class="text_box"
wx:for="{{tips}}">
{{item.name}}
</view>
</view>
</template>
<script>
import amapFile from "../../../static/map/amap-wx"
var key = '4216f7d550dc95ef4ac91e3c0ee6a19a'
import QQMapWX from "../../../static/map/qqmap-wx-jssdk.min"
var qqkey = 'RHGBZ-S2LAU-5MRV7-4QPTZ-JI25K-HVBDV'
var lonlat
var city
export default {
config: {
"navigationBarTitleText": "搜索位置并查看"
},
data: {
NAV_HEIGHT:wx.STATUS_BAR_HEIGHT+wx.DEFAULT_HEADER_HEIGHT+'px',
tips: [],
prevent: false,
keywords: ''
},
// 输入框正在输入时触发的事件
bindInput (e) {
console.log(e)
// 通过e.target.value获得输入框当前的值
var keywords = e.detail.value
// 调用amapFile.AMapWX方法构建myAmapFun对象
var myAmapFun = new amapFile.AMapWX({ key: key })
// myAmapFun对象调用getInputtips方法获得搜索提示数据
myAmapFun.getInputtips({
keywords: keywords, // 输入框键入的关键字
location: lonlat, // 坐标
city: city, // 城市
success: (data) => { // 调用成功后的回调函数
console.log(data,'data')
if (data && data.tips) {
this.setData({
tips: data.tips
})
}
console.log(this.data.tips,'this.data.tips')
}
})
},
// 搜索显示列表点击事件触发
bindSearch (e) {
var keywords = e.target.dataset.keywords
// 调用QQMapWX构造函数构建出qqmap对象
var qqmap = new QQMapWX({key: qqkey})
// qqmap调用geocoder方法来获取
qqmap.geocoder({
address: `北京${keywords}`,
success: (res) => {
// 调用成功则执行文字描述转换事件
this.reverseGeocoder(qqmap, res)
},
fail: (res) => {
// 调用失败则执行此回调函数
},
complete: (res) => {
// 成功与否都将执行此回调函数
}
})
},
// 文字描述转换事件
reverseGeocoder (mapObj, response) {
var name = response.result.title
// 调用reverseGeocoder由坐标到坐标所在位置的文字描述的转换，输入坐标返回地理位置信息和附近poi列表
mapObj.reverseGeocoder({
location: {
latitude: response.result.location.lat,
longitude: response.result.location.lng
},
success: (res) => {
// 调用成功则执行此回调函数
// 执行打开第三方地图查看事件
this.openLocation(res, name)
},
fail: (res) => {
// 调用失败则执行此回调函数
},
complete: (res) => {
// 无论成功与否都会执行此回调函数
}
})
},
// 打开第三方地图查看事件
openLocation (response, name) {
// 通过拿到的response解构赋值给lat lng
let {lat, lng} = response.result.location
// 调用ui.openLocation方法打开第三方地图查看
wx.openLocation({
backgroundColor: '#fff',
color:'#000',
latitude: lat,
longitude: lng,
name: name,
address: response.result.address,
scale: 28
})
},
navigateBack () {
wx.navigateBack()
}
}
</script>
<style lang="less">
// mapSearchTips.less
.section {
padding: 5px 20px;
input {
width: 100%;
height: 30px;
border-radius: 5px;
outline: none;
border:1px solid #ccc;
padding-left:10px;
}
}
.text_box {
padding: 10px 20px;
line-height: 20px;
}
.map .section {
margin-bottom: 0;
}
</style>
================================================
FILE: pages/componentDemo/mapsdk/routePlanning.wx
================================================
<!--routePlanning.ui-->
<template>
<view>
<ui-nav-bar slot="nav-bar" custom-style="{{ {borderBottom:'1px solid rgba(231, 231, 231, 0.6)',backgroundColor:'#fff'} }}">
<ui-row height="46">
<ui-col vertical-align="middle" align="center" width="60" bindtap="navigateBack">
<ui-icon type="arrow-left" size="16" color="#333"></ui-icon>
</ui-col>
<ui-col vertical-align="middle" align="center">
<view>路线选择与规划</view>
</ui-col>
<ui-col vertical-align="middle" align="center" width="60">
</ui-col>
</ui-row>
</ui-nav-bar>
<view style="height:{{NAV_HEIGHT}}"></view>
<view style="height:{{ height-100 }}px">
<map
id="map"
class="map"
longitude="{{longitude}}"
latitude="{{latitude}}"
show-location="{{showLocation}}"
markers="{{markers}}"
polyline="{{polyline}}"
include-points="{{includePoints}}"
style="width:100%;height:{{ height-100 }}px">
</map>
</view>
<ui-fixed-view bottom="0" right="0" left="0">
<view class="map_text">
<ui-row height="45" space-bottom="10">
<ui-col span="3" algin="center" vertical-align="middle" space="10">
<button type="primary" bindtap="walkNav">步行</button>
</ui-col>
<ui-col span="3" algin="center" vertical-align="middle" space="10">
<button type="primary" bindtap="driveNav">驾车</button>
</ui-col>
<ui-col span="3" algin="center" vertical-align="middle" space="10">
<button type="primary" bindtap="ridingNav">骑行</button>
</ui-col>
<ui-col span="3" algin="center" vertical-align="middle" space="10">
<button type="primary" bindtap="transitNav">公交</button>
</ui-col>
</ui-row>
<ui-row>
<ui-col span="6" space="10">距离:{{distance}}米</ui-col>
<ui-col span="6" space="10">车费:{{cost}}元</ui-col>
</ui-row>
</view>
</ui-fixed-view>
</view>
</template>
<script>
import amapFile from "../../../static/map/amap-wx"
var key = '4216f7d550dc95ef4ac91e3c0ee6a19a'
export default {
config: {
"navigationBarTitleText": "路线选择与规划"
},
data : {
NAV_HEIGHT:wx.STATUS_BAR_HEIGHT+wx.DEFAULT_HEADER_HEIGHT+'px',
mapHeight: wx.DEFAULT_CONTENT_HEIGHT - 35 + 'px',
latitude: 39.973700,
longitude: 116.470528,
// scale: 16,
showLocation: true,
mapCtx: null,
myAmapFun: null,
polyline: [],
markers: [{
id: 0,
latitude: 39.989643,
longitude: 116.481028,
iconPath: '/images/mapicon_navi_s.png',
width: 24,
height: 34
}, {
id: 1,
latitude: 39.90816,
longitude: 116.434446,
iconPath: '/images/mapicon_navi_e.png',
width: 24,
height: 34
}],
includePoints: [],
polyline: [],
distance: 0,
cost: 0.00,
height:wx.DEFAULT_CONTENT_HEIGHT
},
onLoad () {
this.initView()
},
onReady () {
this.mapCtx = wx.createMapContext('map')
this.myAmapFun = new amapFile.AMapWX({key: key})
this.initView()
},
navigateBack () {
wx.navigateBack()
},
walkNav () {
this.initView()
this.myAmapFun.getWalkingRoute({
origin: '116.481028,39.989643',
destination: '116.434446,39.90816',
success: (data) => {
this.drawLine(data, 'steps')
},
fail: (info) => {
}
})
},
driveNav () {
this.initView()
this.myAmapFun.getDrivingRoute({
origin: '116.481028,39.989643',
destination: '116.434446,39.90816',
success: (data) => {
this.drawLine(data, 'steps')
},
fail: (info) => {
}
})
},
ridingNav () {
this.initView()
this.myAmapFun.getRidingRoute({
origin: '116.481028,39.989643',
destination: '116.434446,39.90816',
success: (data) => {
this.drawLine(data, 'steps')
},
fail: (info) => {
}
})
},
transitNav () {
this.initView()
this.myAmapFun.getTransitRoute({
origin: '116.481028,39.989643',
destination: '116.434446,39.90816',
city: '北京',
success: (data) => {
this.setData({
distance: data.distance,
cost: parseFloat(data.taxi_cost).toFixed(2)
})
},
fail: (info) => {
}
})
},
drawLine (data, styles) {
console.log(data,styles)
var points = []
if (data.paths && data.paths[0] && data.paths[0][styles]) {
this.setData({
distance: data.paths[0].distance,
cost: 0.00
})
console.log(this.data.distance,this.data.cost)
var steps = data.paths[0][styles]
steps.forEach((item, index) => {
var polen = item.polyline.split(';')
polen.forEach((item_, index_) => {
points.push({
longitude: parseFloat(item_.split(',')[0]),
latitude: parseFloat(item_.split(',')[1])
})
})
})
}
this.setData({
polyline: [{
points: points,
color: '#0091ff',
width: 5
}]
})
console.log(this.data.polyline)
},
initView () {
this.setData({
includePoints: [{
latitude: 39.989643,
longitude: 116.481028
}, {
latitude: 39.90816,
longitude: 116.434446
}]
})
}
}
</script>
<style lang="less">
// routePlanning.less
.map {
height: 100%
}
.map_text{
width: 100%;
height: 100px;
bottom:0;
left: 0;
padding: 10px;
background: #fff;
box-shadow: 0 0 25px 0 #cccccc;
text{
line-height: 25px;
}
}
</style>
================================================
FILE: pages/componentDemo/mask/iconNav.wx
================================================
<!--circleMenu4.ui-->
<template>
<view>
<ui-nav-bar slot="nav-bar" custom-style="{{ {borderBottom:'1px solid rgba(231, 231, 231, 0.6)',backgroundColor:'#fff'} }}">
<ui-row height="46">
<ui-col vertical-align="middle" align="center" width="60" bindtap="navigateBack">
<ui-icon type="arrow-left" size="16" color="#333"></ui-icon>
</ui-col>
<ui-col vertical-align="middle" align="center">
<view>图标导航</view>
</ui-col>
<ui-col vertical-align="middle" align="center" width="60">
</ui-col>
</ui-row>
</ui-nav-bar>
<view style="height:{{NAV_HEIGHT}}"></view>
<view class="sample_content">
<button type="primary" bindtap="handleShowMask">点击打开</button>
</view>
<ui-mask show="{{showMask}}" custom-style="{{ customStyle1}}" effect="scale-in" top="{{STATUS_BAR_HEIGHT}}" blur="light" bindhide="maskHide">
<view class="nav_content">
<ui-row height="100">
<ui-col vertical-align="middle" align="center">
<ui-icon type="liwu" size="24" color="#fff" class="nav_1"></ui-icon>
<view>首页</view>
</ui-col>
<ui-col vertical-align="middle" align="center">
<ui-icon type="liwu" size="24" color="#fff" class="nav_2"></ui-icon>
<view>装修公司</view>
</ui-col>
<ui-col vertical-align="middle" align="center">
<ui-icon type="liwu" size="24" color="#fff" class="nav_3"></ui-icon>
<view>设计师</view>
</ui-col>
</ui-row>
<ui-row height="100">
<ui-col vertical-align="middle" align="center">
<ui-icon type="liwu" size="24" color="#fff" class="nav_4"></ui-icon>
<view>装修案例</view>
</ui-col>
<ui-col vertical-align="middle" align="center">
<ui-icon type="liwu" size="24" color="#fff" class="nav_5"></ui-icon>
<view>装修楼盘</view>
</ui-col>
<ui-col vertical-align="middle" align="center">
<ui-icon type="liwu" size="24" color="#fff" class="nav_6"></ui-icon>
<view>装修图库</view>
</ui-col>
</ui-row>
<ui-row height="100">
<ui-col vertical-align="middle" align="center">
<ui-icon type="liwu" size="24" color="#fff" class="nav_7"></ui-icon>
<view>装修攻略</view>
</ui-col>
<ui-col vertical-align="middle" align="center">
<ui-icon type="liwu" size="24" color="#fff" class="nav_8"></ui-icon>
<view>装修报价</view>
</ui-col>
<ui-col vertical-align="middle" align="center">
<ui-icon type="liwu" size="24" color="#fff" class="nav_9"></ui-icon>
<view>计算器</view>
</ui-col>
</ui-row>
<ui-row height="100">
<ui-col vertical-align="middle" align="center">
<ui-icon type="liwu" size="24" color="#fff" class="nav_10"></ui-icon>
<view>APP下载</view>
</ui-col>
<ui-col vertical-align="middle" align="center">
<ui-icon type="liwu" size="24" color="#fff" class="nav_11"></ui-icon>
<view>商家入驻</view>
</ui-col>
<ui-col vertical-align="middle" align="center">
</ui-col>
</ui-row>
</view>
</ui-mask>
</view>
</template>
<script>
// circleMenu4.js
export default {
config: {
"navigationBarTitleText": "图标导航"
},
data : {
STATUS_BAR_HEIGHT:wx.STATUS_BAR_HEIGHT,
NAV_HEIGHT:wx.STATUS_BAR_HEIGHT+wx.DEFAULT_HEADER_HEIGHT+'px',
showMask: false,
rotate1: '',
rotate2: '',
rotate3: '',
switch: false,
height: wx.DEFAULT_CONTENT_HEIGHT + 'px',
customStyle1:{
'background-color':'rgba(255, 255, 255, 0.8)'
}
},
navigateBack () {
wx.navigateBack()
},
handleShowMask () {
this.setData({
showMask:true
})
}
}
</script>
<style lang="less">
// circleMenu4.less
.sample_content{
background-size: 100%;
}
.mask {
transition: all .25s ease-in;
transform: scale(1.5);
&.show {
transform: scale(1);
}
}
.nav_bg{
background: linear-gradient(to right, #FD5860, #F64B51);
color: #fff;
z-index:800;
}
.nav_switch{
width: 100%;
view{
width: 90%;
margin: 0 auto;
height: 2px;
border-radius: 5px;
background: #fff;
transition: all ease .3s 0s;
-moz-transition: all ease .3s 0s;
-webkit-transition: all ease .3s 0s;
&.middle{
margin: 6px auto;
}
&.rotate1{
transform: translate(0, 0px) rotate(-45deg);
-moz-transform: translate(0, 0px) rotate(-45deg);
-webkit-transform: translate(0, 0px) rotate(-45deg);
-ms-transform: translate(0, 0px) rotate(-45deg);
}
&.rotate2{
transform: scale(0, 1);
-moz-transform: scale(0, 1);
-webkit-transform: scale(0, 1);
-ms-transform: scale(0, 1);
margin: 0;
}
&.rotate3{
transform: translate(0, -4px) rotate(45deg);
-moz-transform: translate(0, -4px) rotate(45deg);
-webkit-transform: translate(0, -4px) rotate(45deg);
-ms-transform: translate(0, -4px) rotate(45deg);
}
}
}
.nav_content{
padding-top: 100px;
.ui-row{
width: 90%;
margin: 0 auto;
}
.ui-icon{
display: block;
width: 44px;
height: 44px;
line-height: 44px;
border-radius: 50%;
}
view{
padding-top: 10px;
}
.nav_1{
background: #FF8E8E;
box-shadow: rgba(255, 142, 142, 0.498039) 0px 6px 15px 0;
}
.nav_1 + view{
color: #FF8E8E;
}
.nav_2{
background-color: #6ee3c3;
box-shadow: rgb(171, 232, 216) 0px 6px 15px 0px;
}
.nav_2 + view{
color: #6ee3c3;
}
.nav_3{
background-color: #fe9bda;
box-shadow: rgb(241, 215, 231) 0px 6px 15px 0px;
}
.nav_3 + view{
color: #fe9bda;
}
.nav_4{
background-color: #cda5fd;
box-shadow: rgb(231, 212, 253) 0px 6px 15px 0px;
}
.nav_4 + view{
color: #cda5fd;
}
.nav_5{
background-color: #f88ca3;
box-shadow: rgb(251, 217, 224) 0px 6px 15px 0px;
}
.nav_5 + view{
color: #f88ca3;
}
.nav_6{
background-color: #fe8c74;
box-shadow: rgb(251, 211, 202) 0px 6px 15px 0px;
}
.nav_6 + view{
color: #fe8c74;
}
.nav_7{
background-color: #7ce488;
box-shadow: rgb(201, 243, 206) 0px 6px 15px 0px;
}
.nav_7 + view{
color: #7ce488;
}
.nav_8{
background-color: #89D7E3;
box-shadow: rgba(137, 215, 227, 0.498039) 0px 6px 15px 0px;
}
.nav_8 + view{
color: #89D7E3;
}
.nav_9{
background-color: #FFAF70;
box-shadow: rgba(255, 175, 112, 0.498039) 0px 6px 15px;
}
.nav_9 + view{
color: #FFAF70;
}
.nav_10{
background-color: #F8A8F9;
box-shadow: rgba(248, 168, 249, 0.498039) 0px 6px 15px 0px;
}
.nav_10 + view{
color: #F8A8F9;
}
.nav_11{
background-color: #FFD43D;
box-shadow: rgba(255, 212, 61, 0.498039) 0px 6px 15px 0px;
}
.nav_11 + view{
color: #FFD43D;
}
}
</style>
================================================
FILE: pages/componentDemo/mask/mask.wx
================================================
<!--mask.ui-->
<template>
<view>
<view>
<ui-nav-bar slot="nav-bar" custom-style="{{ {borderBottom:'1px solid rgba(231, 231, 231, 0.6)',backgroundColor:'#fff'} }}">
<ui-row height="46">
<ui-col vertical-align="middle" align="center" width="60" bindtap="navigateBack">
<ui-icon type="arrow-left" size="16" color="#333"></ui-icon>
</ui-col>
<ui-col vertical-align="middle" align="center">
<view>mask基本使用</view>
</ui-col>
<ui-col vertical-align="middle" align="center" width="60">
</ui-col>
</ui-row>
</ui-nav-bar>
<view style="height:{{NAV_HEIGHT}}"></view>
<view class="sample_title">基本使用</view>
<view class="sample_content">
<button type="primary" data-show="{{ true }}" bindtap="handleShowMask1">打开全屏遮罩</button>
<button type="primary" data-show="{{ true }}" bindtap="handleShowMask2">遮罩导航栏以下的区域</button>
<button type="primary" data-show="{{ true }}" bindtap="handleShowMask3">点击遮罩不关闭</button>
<button type="primary" data-show="{{ true }}" bindtap="handleShowMask4">自定义遮罩背景</button>
<button type="primary" data-show="{{ true }}" bindtap="handleShowMask5">全透明遮罩</button>
<button type="primary" data-show="{{ true }}" bindtap="handleShowMask6">遮罩动画（由小变大）</button>
<button type="primary" data-show="{{ true }}" bindtap="handleShowMask9">遮罩动画（由大变小）</button>
<button type="primary" data-show="{{ true }}" bindtap="handleShowMask7">白色毛玻璃效果（仅IOS）</button>
<button type="primary" data-show="{{ true }}" bindtap="handleShowMask8">黑色毛玻璃效果（仅IOS）</button>
</view>
</view>
<ui-mask show="{{showMask1}}" hide-delay="500" bindtap="masktap">
<view class="content">
<button type="success" data-show="{{ false }}" catchtap="handleShowMask1">关闭遮罩</button>
</view>
</ui-mask>
<ui-mask show="{{showMask2}}" top="{{top2}}">
<view class="content">
<button type="success" data-show="{{ false }}" bindtap="handleShowMask2">关闭遮罩</button>
</view>
</ui-mask>
<ui-mask show="{{showMask3}}" hide-on-tap="{{false}}" bindtap="masktap">
<view class="content">
<button type="success" data-show="{{ false }}" bindtap="handleShowMask3">关闭遮罩</button>
</view>
</ui-mask>
<ui-mask show="{{showMask4}}" custom-style="{{ customStyle1 }}">
<view class="content">
<button type="success" data-show="{{ false }}" bindtap="handleShowMask4">关闭遮罩</button>
</view>
</ui-mask>
<ui-mask show="{{showMask5}}" custom-style="{{ customStyle2 }}" hide-on-tap="{{false}}">
<view class="content">
<button type="success" data-show="{{ false }}" bindtap="handleShowMask5">关闭遮罩</button>
</view>
</ui-mask>
<ui-mask show="{{showMask6}}" effect="scale-out" animation>
<view class="content">
<button type="success" data-show="{{ false }}" bindtap="handleShowMask6">关闭遮罩</button>
</view>
</ui-mask>
<ui-mask show="{{showMask7}}" blur="light">
<view class="content">
<button type="success" data-show="{{ false }}" bindtap="handleShowMask7">关闭遮罩</button>
</view>
</ui-mask>
<ui-mask show="{{showMask8}}" blur="dark">
<view class="content">
<button type="success" data-show="{{ false }}" bindtap="handleShowMask8">关闭遮罩</button>
</view>
</ui-mask>
<ui-mask show="{{showMask9}}" effect="scale-in" animation>
<view class="content content2" data-show="{{ false }}" bindtap="handleShowMask9">
<image src="{{imgSrc1}}" style="width:300px;height:346px;" width="300"></image>
</view>
</ui-mask>
</view>
</template>
<script>
// mask.js
export default {
config: {
"navigationBarTitleText": "mask基本使用"
},
data : {
height:wx.WIN_HEIGHT,
NAV_HEIGHT:wx.STATUS_BAR_HEIGHT+wx.DEFAULT_HEADER_HEIGHT+'px',
top2: wx.STATUS_BAR_HEIGHT+wx.DEFAULT_HEADER_HEIGHT,
showMask1: false,
showMask2: false,
showMask3: false,
showMask4: false,
showMask5: false,
showMask6: false,
showMask7: false,
showMask8: false,
showMask9: false,
showMask10: false,
imgSrc1: 'http://images.uileader.com/20180315/da626bbd-4a86-4d5d-9690-00350528d91f.png',
customStyle1:{
'background-color':'rgba(255, 255, 255, 0.8)',
},
customStyle2:{
'background-color':'rgba(255, 255, 255, 0)',
}
},
masktap(e){
console.log(e)
},
handleTap () {
wx.showToast({
title: 'tap...'
})
},
handleShowMask1 (e) {
console.log(e)
let show = e.currentTarget.dataset.show
this.setData({
showMask1: show
})
},
handleShowMask2 (e) {
let show = e.currentTarget.dataset.show
this.setData({
showMask2: show
})
},
handleShowMask3 (e) {
console.log(e)
let show = e.currentTarget.dataset.show
this.setData({
showMask3: show
})
},
handleShowMask4 (e) {
let show = e.currentTarget.dataset.show
this.setData({
showMask4: show
})
},
handleShowMask5 (e) {
let show = e.currentTarget.dataset.show
this.setData({
showMask5: show
})
},
handleShowMask6 (e) {
let show = e.currentTarget.dataset.show
this.setData({
showMask6: show
})
},
handleShowMask7 (e) {
let show = e.currentTarget.dataset.show
this.setData({
showMask7: show
})
},
handleShowMask8 (e) {
let show = e.currentTarget.dataset.show
this.setData({
showMask8: show
})
},
handleShowMask9 (e) {
let show = e.currentTarget.dataset.show
this.setData({
showMask9: show
})
},
navigateBack () {
wx.navigateBack()
},
}
</script>
<style lang="less">
// mask.less
button {
margin: 10px;
height: 36px;
line-height: 36px;
color: #fff;
}
view {
&.content {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: auto;
width: 100%;
}
&.content2{
height: 100%;
.mix-flex-center();
}
}
.mask8{
.mix-flex-center();
.finger-swiper{
color: #fff;
text-align: center;
}
.know{
color: #d6545d;
text-decoration: underline;
}
}
.tag-6 {
border: 1px solid #f1f2f3;
border-radius: 3px;
text-align: center;
height: 24px;
line-height: 24px;
}
.select-class {
background: #54d09f;
color: #fff;
}
</style>
================================================
FILE: pages/componentDemo/mask/maskGuide.wx
================================================
<!--maskGuide.ui-->
<template>
<view>
<ui-nav-bar slot="nav-bar" custom-style="{{ {borderBottom:'1px solid rgba(231, 231, 231, 0.6)',backgroundColor:'#fff'} }}">
<ui-row height="46">
<ui-col vertical-align="middle" align="center" width="60" bindtap="navigateBack">
<ui-icon type="arrow-left" size="16" color="#333"></ui-icon>
</ui-col>
<ui-col vertical-align="middle" align="center">
<view>操作引导</view>
</ui-col>
<ui-col vertical-align="middle" align="center" width="60">
</ui-col>
</ui-row>
</ui-nav-bar>
<view style="height:{{NAV_HEIGHT}}"></view>
<view class="sample_content">
<button type="primary" data-show="{{true}}" bindtap="handleShowMask1">功能引导</button>
</view>
<ui-mask show="{{showMask1}}" custom-style="{{customSyle}}" >
<view class="finger-swiper" data-show="{{false}}" bindtap="handleShowMask1">
<ui-row>
<ui-col space-right="10">
<ui-icon type="one-finger-swipe-lef" size="36" color="#fff" align="right"></ui-icon>
</ui-col>
<ui-col space-left="10">
<ui-icon type="one-finger-swipe-rig" size="36" color="#fff" align="left"></ui-icon>
</ui-col>
</ui-row>
<view>左右滑屏，查看上/下一个案例</view>
<view class="know">我知道了</view>
</view>
</ui-mask>
</view>
</template>
<script>
// maskGuide.js
export default {
config: {
"navigationBarTitleText": "操作引导"
},
data: {
NAV_HEIGHT:wx.STATUS_BAR_HEIGHT+wx.DEFAULT_HEADER_HEIGHT+'px',
showMask1: true,
customSyle:{
'background':'rgba(0, 0, 0, 0.8)',
'display': 'flex',
'align-items': 'center',
'justify-content': 'center'
}
},
navigateBack () {
wx.navigateBack()
},
handleShowMask1 (e) {
console.log(e)
let show = e.currentTarget.dataset.show
this.setData({
showMask1: show
})
}
}
</script>
<style lang="less">
// maskGuide.less
.mask1{
.mix-flex-center();
}
.finger-swiper{
color: #fff;
text-align: center;
}
.know{
color: #d6545d;
text-decoration: underline;
}
</style>
================================================
FILE: pages/componentDemo/mask/maskTip.wx
================================================
<!--maskTip.ui-->
<template>
<view>
<ui-nav-bar slot="nav-bar" custom-style="{{ {borderBottom:'1px solid rgba(231, 231, 231, 0.6)',backgroundColor:'#fff'} }}">
<ui-row height="46">
<ui-col vertical-align="middle" align="center" width="60" bindtap="navigateBack">
<ui-icon type="arrow-left" size="16" color="#333"></ui-icon>
</ui-col>
<ui-col vertical-align="middle" align="center">
<view>弹出式提示</view>
</ui-col>
<ui-col vertical-align="middle" align="center" width="60">
</ui-col>
</ui-row>
</ui-nav-bar>
<view style="height:{{NAV_HEIGHT}}"></view>
<view class="sample_content">
<button type="primary" data-show="{{ true }}" bindtap="handleShowMask1">关闭按钮在下方</button>
<button type="primary" data-show="{{ true }}" bindtap="handleShowMask2">关闭按钮在右上方</button>
<button type="primary" data-show="{{ true }}" bindtap="handleShowMask3">关闭按钮在右上方，有线</button>
</view>
<ui-mask show="{{showMask1}}" hide-on-tap="{{false}}" class="mask_wrap" custom-style="{{customStyle}}">
<view class="photo" style="width:{{width-50}}">
<image style="width:{{width-50}};height:340px" src="{{imgSrc1}}" ></image>
<ui-icon type="cancel" data-show="{{ false }}" size="48" bindtap="handleShowMask1"></ui-icon>
</view>
</ui-mask>
<ui-mask show="{{showMask2}}" hide-on-tap="{{false}}" class="mask_wrap" custom-style="{{customStyle}}">
<view class="photo" style="width:{{width-50}}">
<ui-icon type="cancel" data-show="{{ false }}" bindtap="handleShowMask2" size="48" class="icon_top"></ui-icon>
<image style="width:{{width-50}};height:340px" src="{{imgSrc2}}" ></image>
</view>
</ui-mask>
<ui-mask show="{{showMask3}}" hide-on-tap="{{false}}" class="mask_wrap" custom-style="{{customStyle}}">
<view class="photo" style="width:{{width-50}}">
<view class="top_view">
<ui-icon type="cancel" data-show="{{ false }}" bindtap="handleShowMask3" size="48" class="icon_top"></ui-icon>
<view class="top_line"></view>
</view>
<image style="width:{{width-50}};height:340px" src="{{imgSrc3}}" ></image>
</view>
</ui-mask>
</view>
</template>
<script>
// maskTip.js
export default {
config: {
"navigationBarTitleText": "弹出式提示"
},
data: {
width:wx.WIN_WIDTH,
NAV_HEIGHT:wx.STATUS_BAR_HEIGHT+wx.DEFAULT_HEADER_HEIGHT+'px',
showMask1: false,
showMask2: false,
showMask3: false,
imgSrc1:'http://images.uileader.com/20180315/da626bbd-4a86-4d5d-9690-00350528d91f.png',
imgSrc2:'http://images.uileader.com/20180315/da626bbd-4a86-4d5d-9690-00350528d91f.png',
imgSrc3:'http://images.uileader.com/20180315/f52acb66-d0b2-41fc-be57-30da518e15ec.png',
customStyle:{
'background':'rgba(51, 51, 51, 0.9)'
}
},
navigateBack () {
wx.navigateBack()
},
handleShowMask1 (e) {
let show = e.currentTarget.dataset.show
this.setData({
showMask1: show
})
},
handleShowMask2 (e) {
let show = e.currentTarget.dataset.show
this.setData({
showMask2: show
})
},
handleShowMask3 (e) {
let show = e.currentTarget.dataset.show
this.setData({
showMask3: show
})
}
}
</script>
<style lang="less">
// maskTip.less
button {
margin: 10px;
height: 36px;
line-height: 36px;
color: #fff;
}
.mask_wrap {
.photo {
padding: 0;
position: absolute;
left: 10%;
right: 10%;
top: 50%;
transform: translateY(-50%);
image {
display: block;
width: 100%;
}
.ui-icon {
display: block;
text-align: center;
// transform: translateY(10px);
font-size: 96rpx;
color: #fff;
}
.icon_top{
text-align: right;
}
.top_view{
position: relative;
// border: 1px solid red;
.top_line{
position: absolute;
bottom:0px;
right: 24px;
width: 2px;
height: 15px;
background-color: #fff;
}
}
}
}
</style>
================================================
FILE: pages/componentDemo/miniStar.wx
================================================
<!--starView.ui-->
<template>
<view>
<ui-nav-bar slot="nav-bar" custom-style="{{ {borderBottom:'1px solid rgba(231, 231, 231, 0.6)',backgroundColor:'#fff'} }}">
<ui-row height="46">
<ui-col vertical-align="middle" align="center" width="60" bindtap="navigateBack">
<ui-icon type="arrow-left" size="16" color="#333"></ui-icon>
</ui-col>
<ui-col vertical-align="middle" align="center">
<view>星级展示</view>
</ui-col>
<ui-col vertical-align="middle" align="center" width="60">
</ui-col>
</ui-row>
</ui-nav-bar>
<view style="height:{{NAV_HEIGHT}}"></view>
<view class="sample_title">基本使用</view>
<view class="sample_content">
<ui-mini-star></ui-mini-star>
</view>
<view>
<view class="sample_title">评分:1 ~ 1.9</view>
<view class="sample_content">
<ui-mini-star value="1.3"></ui-mini-star>
</view>
</view>
<view>
<view class="sample_title">评分:2 ~ 2.9</view>
<view class="sample_content">
<ui-mini-star value="2.5"></ui-mini-star>
</view>
</view>
<view>
<view class="sample_title">评分:3</view>
<view class="sample_content">
<ui-mini-star value="3"></ui-mini-star>
</view>
</view>
<view>
<view class="sample_title">评分:3.1 ~ 3.9</view>
<view class="sample_content">
<ui-mini-star value="3.6"></ui-mini-star>
</view>
</view>
<view>
<view class="sample_title">评分:4</view>
<view class="sample_content">
<ui-mini-star value="4"></ui-mini-star>
</view>
</view>
<view>
<view class="sample_title">评分:4.1 ~ 4.9</view>
<view class="sample_content">
<ui-mini-star value="4.6"></ui-mini-star>
</view>
</view>
<view>
<view class="sample_title">评分:5</view>
<view class="sample_content">
<ui-mini-star value="5"></ui-mini-star>
</view>
</view>
<view>
<view class="sample_title">自定义宽高</view>
<view class="sample_content">
<ui-mini-star value="5" width="146" height="26"></ui-mini-star>
</view>
</view>
<view>
<view class="sample_title">自定义图片</view>
<view class="sample_content">
<ui-mini-star value="5" data="{{imgData}}"></ui-mini-star>
</view>
</view>
</view>
</template>
<script>
// starView.js
export default {
config: {
"navigationBarTitleText": "星级展示"
},
data :{
NAV_HEIGHT:wx.STATUS_BAR_HEIGHT+wx.DEFAULT_HEADER_HEIGHT+'px',
imgData: {
imgSrc1: 'http://images.uileader.com/20180410/6941505a-dc1d-4e76-a88f-d92a0557c3dc.png',
imgSrc2: 'http://images.uileader.com/20180410/c88b2b34-81e0-4454-97bf-dd6a3d1be8e6.png',
imgSrc3: 'http://images.uileader.com/20180410/e67961d2-5831-4b23-b51a-11239fae7d91.png',
imgSrc4: 'http://images.uileader.com/20180410/10dd67ca-a09d-4d77-a190-95889d56091d.png',
imgSrc5: 'http://images.uileader.com/20180410/f2911a8d-1db9-442a-a29d-a01be7d86b43.png',
imgSrc6: 'http://images.uileader.com/20180410/d9278f23-a2d1-4bd4-9b0a-19a55a0add54.png',
imgSrc7: 'http://images.uileader.com/20180410/c4c0047f-467c-4984-9e7f-263b2447f2b5.png',
imgSrc8: 'http://images.uileader.com/20180410/0490f6ac-eae9-4801-973b-30f5ea0a5d0c.png'
}
},
navigateBack () {
wx.navigateBack()
}
}
</script>
<style lang="less">
.title {
padding: 10px 10px 5px;
}
.info {
padding: 10px;
}
</style>
================================================
FILE: pages/componentDemo/popup.wx
================================================
<!--popup.ui-->
<template>
<view>
<ui-nav-bar slot="nav-bar" custom-style="{{ {borderBottom:'1px solid rgba(231, 231, 231, 0.6)',backgroundColor:'#fff'} }}">
<ui-row height="46">
<ui-col vertical-align="middle" align="center" width="60" bindtap="navigateBack">
<ui-icon type="arrow-left" size="16" color="#333"></ui-icon>
</ui-col>
<ui-col vertical-align="middle" align="center">
<view>popup基本使用</view>
</ui-col>
<ui-col vertical-align="middle" align="center" width="60">
</ui-col>
</ui-row>
</ui-nav-bar>
<view style="height:{{NAV_HEIGHT}}"></view>
<view class="sample_content">
<button data-show="{{ true }}" bindtap="openPopup1">默认popup（高度由内容决定）</button>
<button data-show="{{ true }}" bindtap="openPopup8">打开两秒后自动关闭</button>
<button data-show="{{ true }}" bindtap="openPopup2">自定义高度</button>
<button data-show="{{ true }}" bindtap="openPopup3">全屏popup</button>
<button data-show="{{ true }}" bindtap="openPopup4">遮罩透明</button>
<button data-show="{{ true }}" bindtap="openPopup5">自定义内容区域</button>
<button data-show="{{ true }}" bindtap="openPopup6">自定义方向（右侧）</button>
<button data-show="{{ true }}" bindtap="openPopup7">自定义方向（上方）</button>
</view>
<ui-popup show="{{show1}}" bindinit="bindinit" bindshow="bindshow">
<view>
<ui-row height="40">
<ui-col vertical-align="middle">开关</ui-col>
<ui-col vertical-align="middle" align="right">
<switch checked="{{ show1 }}" bindchange="handleSwitchChange"></switch>
</ui-col>
</ui-row>
</view>
</ui-popup>
<ui-popup show="{{ show2 }}" position="bottom" height="300">
<view style="padding: 15px;">
<button bindtap="handleShow2" plain type="primary">关闭</button>
</view>
</ui-popup>
<ui-popup show="{{ show3 }}" height="100%">
<view class="popup1">
<button bindtap="handleShow3" plain type="primary">关闭</button>
</view>
</ui-popup>
<ui-popup show="{{ show4 }}" position="bottom" height="300" mask-style="{{ maskStyle1}}" hide-on-tap="{{false}}">
<view class="popup4">
<button bindtap="handleShow4" plain type="primary">关闭</button>
</view>
</ui-popup>
<ui-popup show="{{ show5 }}" height="270" background="transparent">
<view class="popup5">
<ui-row height="40" border-bottom>
<ui-col vertical-align="middle" space-left="20">动漫APP</ui-col>
<ui-col width="40" vertical-align="middle" align="center" bindtap="handleShow5">
<ui-icon type="x" size="18" color="#FC8950"></ui-icon>
</ui-col>
</ui-row>
<view class="title">更新更快、流量超省、内容更全</view>
<ui-row height="50">
<ui-col space-left="20" space-right="10" vertical-align="middle">
<button>继续阅读</button>
</ui-col>
<ui-col space-left="10" space-right="20" vertical-align="middle">
<button type="primary" bindtap="handleShow5">安装享福利</button>
</ui-col>
</ui-row>
</view>
</ui-popup>
<ui-popup show="{{ show6 }}" position="right">
<view style="width:80vw;">
</view>
</ui-popup>
<ui-popup show="{{ show7 }}" position="top" top="{{ poptpTop }}" mask-style="{{ maskStyle2}}">
<view class="top_pop">
<ui-tags data="{{list00}}" bindchange="singleTap" col-number="3" fixed-width
></ui-tags>
</view>
</ui-popup>
<ui-popup show="{{ show8 }}" hide-on-tap="{{false}}" >
<view class="popup2">
这是一段通知消息！
</view>
</ui-popup>
</view>
</template>
<script>
const tagStyle = `
color: #555;
padding: 0 20rpx;
border-radius: 3px;
text-align: center;
height: 25px;
display: flex;
justify-content: center;
align-items: center;
line-height: 20px;
margin: 14rpx 0;
border:1px solid #ccc;
`
const selectStyle = `
padding: 0 20rpx;
border-radius: 3px;
text-align: center;
height: 25px;
display: flex;
justify-content: center;
align-items: center;
line-height: 20px;
margin: 14rpx 0;
background: #F2E8E7;
color: #ED3027;
border:1px solid #ccc;
`
// popup.js
export default {
config: {
"navigationBarTitleText": "popup基本使用",
"navigationBarBackgroundColor":"#fff",
"navigationBarTextStyle":"black",
"navigationBarBorderColor": "rgba(231, 231, 231, 0.6)",
"navigationBarTextStyle":"black"
},
data: {
NAV_HEIGHT:wx.STATUS_BAR_HEIGHT+wx.DEFAULT_HEADER_HEIGHT+'px',
show: false,
show1: false,
show2: false,
show3: false,
show4: false,
show5: false,
show6: false,
show7: false,
show8: false,
tagsWidth: wx.WIN_WIDTH - 20,
poptpTop: wx.STATUS_BAR_HEIGHT+wx.DEFAULT_HEADER_HEIGHT,
maskStyle1:{
'background-color':'transparent'
},
maskStyle2:{
'top':'198px'
},
list00: [{
text: '全部活动',
tagStyle: tagStyle,
tagSelectedStyle: selectStyle,
checked: true
}, {
text: '电脑办公',
tagStyle: tagStyle,
tagSelectedStyle: selectStyle,
checked: false
}, {
text: '精选活动',
tagStyle: tagStyle,
tagSelectedStyle: selectStyle,
checked: false
}, {
text: '个护美妆',
tagStyle: tagStyle,
tagSelectedStyle: selectStyle,
checked: false
}, {
text: '家用电器',
tagStyle: tagStyle,
tagSelectedStyle: selectStyle,
checked: false
}, {
text: '酒水饮料',
tagStyle: tagStyle,
tagSelectedStyle: selectStyle,
checked: false
}, {
text: '日用百货',
tagStyle: tagStyle,
tagSelectedStyle: selectStyle,
checked: false
}, {
text: '流行服饰',
tagStyle: tagStyle,
tagSelectedStyle: selectStyle,
checked: false
}, {
text: '鞋靴箱包',
tagStyle: tagStyle,
tagSelectedStyle: selectStyle,
checked: false
}, {
text: '手机数码',
tagStyle: tagStyle,
tagSelectedStyle: selectStyle,
checked: false
}, {
text: '钟表珠宝',
tagStyle: tagStyle,
tagSelectedStyle: selectStyle,
checked: false
}]
},
navigateBack () {
wx.navigateBack()
},
log (str) {
if (str === 'hide') {
this.show1 = false
}
},
handleShow2(){
this.setData({
show2:false
})
},
bindinit(e){
console.log('bindinit')
},
bindshow(){
console.log('bindshow')
},
handleShow3(){
this.setData({
show3:false
})
},
handleShow4(){
this.setData({
show4:false
})
},
handleShow5(){
this.setData({
show5:false
})
},
singleTap (e) {
let opt = e.detail.index
wx.showToast({
title: this.data.list00[opt].text,
icon:'none'
})
// this.data.show7 = false
this.data.list00.forEach((item, index) => {
item.checked = (index === opt)
})
this.setData({
show7:false,
list00:this.data.list00
})
},
openPopup1 (e) {
let show = e.currentTarget.dataset.show
this.setData({
show1: show
})
},
openPopup2 (e) {
let show = e.currentTarget.dataset.show
this.setData({
show2: show
})
},
openPopup3 (e) {
let show = e.currentTarget.dataset.show
this.setData({
show3: show
})
},
openPopup4 (e) {
let show = e.currentTarget.dataset.show
this.setData({
show4: show
})
},
openPopup5 (e) {
let show = e.currentTarget.dataset.show
this.setData({
show5: show
})
},
openPopup6 (e) {
let show = e.currentTarget.dataset.show
this.setData({
show6: show
})
},
openPopup7 (e) {
let show = e.currentTarget.dataset.show
this.setData({
show7: show
})
},
openPopup8 (e) {
let show = e.currentTarget.dataset.show
this.setData({
show8: show
})
setTimeout(() => {
this.setData({
show8: false
})
}, 2000)
},
handleSwitchChange (e) {
this.setData({
show1: e.detail.value
})
}
}
</script>
<style lang="less">
// popup.less
button {
margin: 10px;
height: 36px;
line-height: 36px;
}
.popup1{
padding: 40px 20px 0 20px;
}
.popup2{
height:50px;
line-height: 50px;
text-align: center;
font-size: 14px;
gitextract_m7uqnks2/
├── .gitignore
├── LICENSE
├── README.md
├── app.wxa
├── min.config.json
├── package.json
├── pages/
│ ├── componentDemo/
│ │ ├── accordion.wx
│ │ ├── badge.wx
│ │ ├── blur.wx
│ │ ├── blur3.wx
│ │ ├── button.wx
│ │ ├── calendar.wx
│ │ ├── calendar2.wx
│ │ ├── calendar3.wx
│ │ ├── cascader.wx
│ │ ├── checklist.wx
│ │ ├── constant.wx
│ │ ├── countDown.wx
│ │ ├── countUp.wx
│ │ ├── demo.js
│ │ ├── divider.wx
│ │ ├── fixedView.wx
│ │ ├── fixedView2.wx
│ │ ├── icon.wx
│ │ ├── indexList.wx
│ │ ├── indexList1.wx
│ │ ├── indexList4.wx
│ │ ├── map/
│ │ │ ├── getLocation.wx
│ │ │ ├── mapDemo.wx
│ │ │ ├── mapDraw.wx
│ │ │ └── trajectory.wx
│ │ ├── mapService/
│ │ │ ├── mapSearchInput.wx
│ │ │ └── tencentmap.wx
│ │ ├── mapsdk/
│ │ │ ├── distanceCalculation.wx
│ │ │ ├── drawStaticMap.wx
│ │ │ ├── interestPointAroud.wx
│ │ │ ├── mapComprehensive.wx
│ │ │ ├── mapSearchTips.wx
│ │ │ └── routePlanning.wx
│ │ ├── mask/
│ │ │ ├── iconNav.wx
│ │ │ ├── mask.wx
│ │ │ ├── maskGuide.wx
│ │ │ └── maskTip.wx
│ │ ├── miniStar.wx
│ │ ├── popup.wx
│ │ ├── roller.wx
│ │ ├── row.wx
│ │ ├── rowImg.wx
│ │ ├── rowList.wx
│ │ ├── ruler.wx
│ │ ├── segment.wx
│ │ ├── segment2.wx
│ │ ├── showAlert.wx
│ │ ├── showConfirm.wx
│ │ ├── slider.wx
│ │ ├── star.wx
│ │ ├── stepper.wx
│ │ ├── sticky.wx
│ │ ├── sticky2.wx
│ │ ├── sticky3.wx
│ │ ├── sticky4.wx
│ │ ├── styleLib.wx
│ │ ├── summary.wx
│ │ ├── swipeOut.wx
│ │ ├── swiper.wx
│ │ ├── tabs.wx
│ │ ├── tabs2.wx
│ │ ├── tabs3.wx
│ │ ├── tags.wx
│ │ ├── timeline.wx
│ │ ├── timeline2.wx
│ │ ├── timeline3.wx
│ │ ├── v-calendar.wx
│ │ ├── v-calendar2.wx
│ │ ├── v-calendar3.wx
│ │ └── vtabs.wx
│ ├── home/
│ │ ├── about.wx
│ │ ├── apiList.wx
│ │ ├── changeList.wx
│ │ ├── formList.wx
│ │ ├── formList3.wx
│ │ ├── graphicalList.wx
│ │ ├── graphicalList2.wx
│ │ ├── mapList.wx
│ │ ├── mapList2.wx
│ │ ├── mediaCompList.wx
│ │ ├── modalList.wx
│ │ ├── textList.wx
│ │ ├── viewList.wx
│ │ └── viewList2.wx
│ └── index.wx
└── static/
├── data/
│ └── city.js
├── map/
│ └── amap-wx.js
├── styles/
│ ├── col.less
│ ├── components.less
│ ├── icon.less
│ ├── index.less
│ ├── reset.less
│ ├── row-list.less
│ └── row.less
└── utils/
├── mixins.less
└── system.js
SYMBOL INDEX (7 symbols across 2 files)
FILE: static/map/amap-wx.js
function AMapWX (line 1) | function AMapWX(a){this.key=a.key,this.requestConfig={key:a.key,s:"rsx",...
function c (line 1) | function c(c){var d=b.requestConfig;wx.request({url:"https://restapi.ama...
function d (line 1) | function d(d){var e="base";a.type&&"forecast"==a.type&&(e="all"),wx.requ...
function e (line 1) | function e(e){wx.request({url:"https://restapi.amap.com/v3/geocode/regeo...
function d (line 1) | function d(d){var e={key:b.key,location:d,s:c.s,platform:c.platform,appn...
function f (line 1) | function f(b){c.push("location="+b),a.zoom&&c.push("zoom="+a.zoom),a.siz...
FILE: static/utils/system.js
method attachInfo (line 2) | attachInfo () {
Condensed preview — 102 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (838K chars).
[
{
"path": ".gitignore",
"chars": 103,
"preview": "lib\r\ndist\r\nnode_modules\r\n.DS_Store\r\nexample/**/dist\r\npackage-lock.json\r\n.idea\r\n.vscode/\r\n*.log\r\n*.zip\r\n"
},
{
"path": "LICENSE",
"chars": 1067,
"preview": "MIT License\n\nCopyright (c) 2017 Meili Inc.\n\nPermission is hereby granted, free of charge, to any person obtaining a copy"
},
{
"path": "README.md",
"chars": 1772,
"preview": "<p align=\"center\">\n\n<img width=\"200\" height=\"200\" src=\"https://github.com/uileader/touchui/blob/master/images/about_logo"
},
{
"path": "app.wxa",
"chars": 5473,
"preview": "<template>\n <page></page>\n</template>\n\n<script>\nimport system from './static/utils/system'\nexport default {\n config: {"
},
{
"path": "min.config.json",
"chars": 595,
"preview": "{\n \"style\": {\n \"brandColor\": \"#FF0077\",\n \"controlColor\": \"#FF5777\",\n \"mainHeadingColor\": \"#333333\",\n \"subHe"
},
{
"path": "package.json",
"chars": 551,
"preview": "{\n \"name\": \"touchui_minapp\",\n \"description\": \"TouchUI-小程序\",\n \"version\": \"1.0.0\",\n \"license\": \"MIT\",\n \"dependencies\""
},
{
"path": "pages/componentDemo/accordion.wx",
"chars": 3977,
"preview": "<template>\r\n <view>\r\n <ui-nav-bar slot=\"nav-bar\" custom-style=\"{{ {borderBottom:'1px solid rgba(231, 231, 231, 0.6)'"
},
{
"path": "pages/componentDemo/badge.wx",
"chars": 4667,
"preview": "<!--badge.ui-->\n<template>\n <view>\n <ui-nav-bar slot=\"nav-bar\" custom-style=\"{{ {borderBottom:'1px solid rgba(231, 2"
},
{
"path": "pages/componentDemo/blur.wx",
"chars": 1906,
"preview": "<!--image8.ui-->\n<template>\n <view>\n <!-- 自定义导航 -->\n <ui-nav-bar slot=\"nav-bar\" custom-style=\"{{ {borderBottom:'1"
},
{
"path": "pages/componentDemo/blur3.wx",
"chars": 2608,
"preview": "<!--image8.ui-->\n<template>\n <view>\n <ui-nav-bar slot=\"nav-bar\" custom-style=\"{{ {backgroundColor:'rgba(255,255,255"
},
{
"path": "pages/componentDemo/button.wx",
"chars": 2791,
"preview": "<!--button.ui-->\n<template>\n <view>\n <ui-nav-bar slot=\"nav-bar\" custom-style=\"{{ {borderBottom:'1px solid rgba(231, "
},
{
"path": "pages/componentDemo/calendar.wx",
"chars": 7269,
"preview": "<template>\n <view>\n <view style=\"height:{{contentHeight}}px\">\n <ui-nav-bar slot=\"nav-bar\" custom-style=\"{{ {b"
},
{
"path": "pages/componentDemo/calendar2.wx",
"chars": 8394,
"preview": "<template>\n <view>\n <ui-nav-bar slot=\"nav-bar\" custom-style=\"{{ {backgroundColor:'#fff'} }}\">\n <ui-row he"
},
{
"path": "pages/componentDemo/calendar3.wx",
"chars": 3012,
"preview": "<template>\n <view>\n <ui-nav-bar slot=\"nav-bar\">\n <ui-row height=\"46\">\n <ui-col vertical-align=\"middle\" a"
},
{
"path": "pages/componentDemo/cascader.wx",
"chars": 9581,
"preview": "<template>\n <view>\n <ui-nav-bar slot=\"nav-bar\" custom-style=\"{{ {borderBottom:'1px solid rgba(231, 231, 231, 0.6)',bac"
},
{
"path": "pages/componentDemo/checklist.wx",
"chars": 4213,
"preview": "<template>\n <ui-nav-bar slot=\"nav-bar\" custom-style=\"{{ {borderBottom:'1px solid rgba(231, 231, 231, 0.6)',background"
},
{
"path": "pages/componentDemo/constant.wx",
"chars": 4009,
"preview": "<!--constant.ui-->\n<template>\n <view>\n <ui-nav-bar slot=\"nav-bar\" custom-style=\"{{ {borderBottom:'1px solid rgba(231"
},
{
"path": "pages/componentDemo/countDown.wx",
"chars": 2645,
"preview": "<!--countUp.ui-->\r\n<template>\r\n <view>\r\n <ui-nav-bar slot=\"nav-bar\" custom-style=\"{{ {borderBottom:'1px solid rg"
},
{
"path": "pages/componentDemo/countUp.wx",
"chars": 3184,
"preview": "<!--countUp.ui-->\r\n<template>\r\n <view>\r\n <ui-nav-bar slot=\"nav-bar\" custom-style=\"{{ {borderBottom:'1px solid rgba(2"
},
{
"path": "pages/componentDemo/demo.js",
"chars": 4639,
"preview": "export default\r\n { \"result\": \"{\\\"A\\\":[{\\\"currencyId\\\":6,\\\"currencyName\\\":\\\"澳门元（OMP)\\\",\\\"name\\\":\\\"澳门元（OMP)\\\",\\\"rate\\\":1."
},
{
"path": "pages/componentDemo/divider.wx",
"chars": 1513,
"preview": "<template>\n <view>\n <ui-nav-bar slot=\"nav-bar\" custom-style=\"{{ {borderBottom:'1px solid rgba(231, 231, 231, 0.6)',b"
},
{
"path": "pages/componentDemo/fixedView.wx",
"chars": 2075,
"preview": "<template>\n <view>\n <!-- 自定义导航 -->\n <ui-nav-bar slot=\"nav-bar\" custom-style=\"{{ {boxShadow: '0 0px 16px 0 #ccc',b"
},
{
"path": "pages/componentDemo/fixedView2.wx",
"chars": 2537,
"preview": "<!--fixedView2.ui-->\n<template>\n <!-- 自定义导航 -->\n <ui-nav-bar slot=\"nav-bar\" custom-style=\"{{ {boxShadow: '0 0px 16"
},
{
"path": "pages/componentDemo/icon.wx",
"chars": 2824,
"preview": "<!--icon.ui-->\n<template>\n <view>\n <ui-nav-bar slot=\"nav-bar\" custom-style=\"{{ {borderBottom:'1px solid rgba(231, 23"
},
{
"path": "pages/componentDemo/indexList.wx",
"chars": 1808,
"preview": "<!--indexList.ui-->\n<template>\n <view>\n <ui-nav-bar slot=\"nav-bar\" custom-style=\"{{ {borderBottom:'1px solid rgba(23"
},
{
"path": "pages/componentDemo/indexList1.wx",
"chars": 15436,
"preview": "<template>\n <view class=\"ui-dialog-content\">\n <ui-nav-bar class=\"ui-dialog-header\">\n <ui-row height=\""
},
{
"path": "pages/componentDemo/indexList4.wx",
"chars": 1884,
"preview": "<template>\n <view>\n <ui-nav-bar slot=\"nav-bar\" custom-style=\"{{ {borderBottom:'1px solid rgba(231, 231, 231, 0.6)',b"
},
{
"path": "pages/componentDemo/map/getLocation.wx",
"chars": 3668,
"preview": "<!--getLocation.ui-->\n<template>\n <view>\n <ui-nav-bar slot=\"nav-bar\" custom-style=\"{{ {borderBottom:'1px solid rgba("
},
{
"path": "pages/componentDemo/map/mapDemo.wx",
"chars": 5526,
"preview": "<template>\n <view>\n <ui-nav-bar slot=\"nav-bar\" custom-style=\"{{ {borderBottom:'1px solid rgba(231, 231, 231, 0.6)',b"
},
{
"path": "pages/componentDemo/map/mapDraw.wx",
"chars": 4390,
"preview": "<template>\n <view class=\"map-wrap\">\n <ui-nav-bar slot=\"nav-bar\" custom-style=\"{{ {borderBottom:'1px solid rgba(231, "
},
{
"path": "pages/componentDemo/map/trajectory.wx",
"chars": 6079,
"preview": "<!--trajectory.ui-->\n<template>\n <view>\n <ui-nav-bar slot=\"nav-bar\" custom-style=\"{{ {borderBottom:'1px solid rgba(2"
},
{
"path": "pages/componentDemo/mapService/mapSearchInput.wx",
"chars": 4128,
"preview": "<!--mapSearchInput.ui-->\n<template>\n <view>\n <ui-nav-bar slot=\"nav-bar\" custom-style=\"{{ {borderBottom:'1px solid rg"
},
{
"path": "pages/componentDemo/mapService/tencentmap.wx",
"chars": 11692,
"preview": "<!--mapSearchTips.ui-->\n<template>\n <view>\n <ui-nav-bar slot=\"nav-bar\" custom-style=\"{{ {borderBottom:'1px solid rgb"
},
{
"path": "pages/componentDemo/mapsdk/distanceCalculation.wx",
"chars": 3644,
"preview": "<!--distanceCalculation.ui-->\n<template>\n <view>\n <ui-nav-bar slot=\"nav-bar\" custom-style=\"{{ {borderBottom:'1px sol"
},
{
"path": "pages/componentDemo/mapsdk/drawStaticMap.wx",
"chars": 2551,
"preview": "<!--drawStaticMap.ui-->\n<template>\n <view>\n <ui-nav-bar slot=\"nav-bar\" custom-style=\"{{ {borderBottom:'1px solid rgb"
},
{
"path": "pages/componentDemo/mapsdk/interestPointAroud.wx",
"chars": 4030,
"preview": "<!--interestPointAroud.ui-->\n<template>\n <view>\n <ui-nav-bar slot=\"nav-bar\" custom-style=\"{{ {borderBottom:'1px soli"
},
{
"path": "pages/componentDemo/mapsdk/mapComprehensive.wx",
"chars": 6344,
"preview": "<!--mapComprehensive.ui-->\n<template>\n <view>\n <ui-nav-bar slot=\"nav-bar\" custom-style=\"{{ {borderBottom:'1px solid "
},
{
"path": "pages/componentDemo/mapsdk/mapSearchTips.wx",
"chars": 3881,
"preview": "<!--mapSearchTips.ui-->\n<template>\n <view>\n <ui-nav-bar slot=\"nav-bar\" custom-style=\"{{ {borderBottom:'1px solid rgb"
},
{
"path": "pages/componentDemo/mapsdk/routePlanning.wx",
"chars": 5606,
"preview": "<!--routePlanning.ui-->\n<template>\n <view>\n <ui-nav-bar slot=\"nav-bar\" custom-style=\"{{ {borderBottom:'1px solid rgb"
},
{
"path": "pages/componentDemo/mask/iconNav.wx",
"chars": 7027,
"preview": "<!--circleMenu4.ui-->\n<template>\n <view>\n <ui-nav-bar slot=\"nav-bar\" custom-style=\"{{ {borderBottom:'1px solid rgba("
},
{
"path": "pages/componentDemo/mask/mask.wx",
"chars": 6427,
"preview": "<!--mask.ui-->\n<template>\n <view>\n <view>\n <ui-nav-bar slot=\"nav-bar\" custom-style=\"{{ {borderBottom:'1px solid"
},
{
"path": "pages/componentDemo/mask/maskGuide.wx",
"chars": 2176,
"preview": "<!--maskGuide.ui-->\n<template>\n <view>\n <ui-nav-bar slot=\"nav-bar\" custom-style=\"{{ {borderBottom:'1px solid rgba(23"
},
{
"path": "pages/componentDemo/mask/maskTip.wx",
"chars": 4107,
"preview": "<!--maskTip.ui-->\n<template>\n <view>\n <ui-nav-bar slot=\"nav-bar\" custom-style=\"{{ {borderBottom:'1px solid rgba(231,"
},
{
"path": "pages/componentDemo/miniStar.wx",
"chars": 3481,
"preview": "<!--starView.ui-->\n<template>\n <view>\n <ui-nav-bar slot=\"nav-bar\" custom-style=\"{{ {borderBottom:'1px solid rgba(231"
},
{
"path": "pages/componentDemo/popup.wx",
"chars": 8849,
"preview": "<!--popup.ui-->\n<template>\n <view>\n <ui-nav-bar slot=\"nav-bar\" custom-style=\"{{ {borderBottom:'1px solid rgba(231, 2"
},
{
"path": "pages/componentDemo/roller.wx",
"chars": 8801,
"preview": "<!--roller.ui-->\r\n<template>\r\n <view>\r\n <ui-nav-bar slot=\"nav-bar\" custom-style=\"{{ {borderBottom:'1px solid rgb"
},
{
"path": "pages/componentDemo/row.wx",
"chars": 7834,
"preview": "<template>\r\n <view>\r\n <ui-nav-bar slot=\"nav-bar\" custom-style=\"{{ {borderBottom:'1px solid rgba(231, 231, 231, 0.6)'"
},
{
"path": "pages/componentDemo/rowImg.wx",
"chars": 8089,
"preview": "<template>\r\n <view>\r\n <ui-nav-bar slot=\"nav-bar\" custom-style=\"{{ {borderBottom:'1px solid rgba(231, 231, 231, 0.6)'"
},
{
"path": "pages/componentDemo/rowList.wx",
"chars": 10232,
"preview": "<!--rowList.ui-->\r\n<template>\r\n <ui-nav-bar slot=\"nav-bar\" custom-style=\"{{ {borderBottom:'1px solid rgba(231, 231,"
},
{
"path": "pages/componentDemo/ruler.wx",
"chars": 2397,
"preview": "<!--ruler.ui-->\n<template>\n <view>\n <!-- 自定义导航 -->\n <ui-nav-bar slot=\"nav-bar\" custom-style=\"{{ {borderBottom:'1p"
},
{
"path": "pages/componentDemo/segment.wx",
"chars": 4450,
"preview": "<!--segment.ui-->\n<template>\n <view>\n <ui-nav-bar slot=\"nav-bar\" custom-style=\"{{ {borderBottom:'1px solid rgba(23"
},
{
"path": "pages/componentDemo/segment2.wx",
"chars": 2888,
"preview": "<!--segment2.ui-->\n<template>\n <view>\n <ui-nav-bar slot=\"nav-bar\" class=\"nav_bar\" custom-style=\"{{ {backgroundColor:"
},
{
"path": "pages/componentDemo/showAlert.wx",
"chars": 1869,
"preview": "<!--showAlert.ui-->\r\n<template>\r\n <view>\r\n <ui-nav-bar slot=\"nav-bar\" custom-style=\"{{ {borderBottom:'1px solid rgba"
},
{
"path": "pages/componentDemo/showConfirm.wx",
"chars": 2127,
"preview": "<!--showConfirm.ui-->\r\n<template>\r\n <view>\r\n <ui-nav-bar slot=\"nav-bar\" custom-style=\"{{ {borderBottom:'1px solid rg"
},
{
"path": "pages/componentDemo/slider.wx",
"chars": 13417,
"preview": "\r\n<template>\r\n <view>\r\n <ui-nav-bar slot=\"nav-bar\" custom-style=\"{{ {borderBottom:'1px solid rgba(231, 231, 231, 0.6"
},
{
"path": "pages/componentDemo/star.wx",
"chars": 6630,
"preview": "<!--star.ui-->\n<template>\n <view>\n <ui-nav-bar slot=\"nav-bar\" custom-style=\"{{ {borderBottom:'1px solid rgba(231, "
},
{
"path": "pages/componentDemo/stepper.wx",
"chars": 2390,
"preview": "<!--stepper.ui-->\n<template>\n <view>\n <ui-nav-bar slot=\"nav-bar\" custom-style=\"{{ {borderBottom:'1px solid rgba(231,"
},
{
"path": "pages/componentDemo/sticky.wx",
"chars": 2387,
"preview": "<template>\n <view>\n <ui-nav-bar slot=\"nav-bar\" custom-style=\"{{ {borderBottom:'1px solid rgba(231, 231, 231, 0.6)',b"
},
{
"path": "pages/componentDemo/sticky2.wx",
"chars": 2682,
"preview": "<template>\n <view>\n <ui-nav-bar slot=\"nav-bar\" custom-style=\"{{ {borderBottom:'1px solid rgba(231, 231, 231, 0.6)',b"
},
{
"path": "pages/componentDemo/sticky3.wx",
"chars": 58004,
"preview": "<!--sticky3.ui-->\n<template>\n <view>\n <ui-nav-bar slot=\"nav-bar\" custom-style=\"{{ {borderBottom:'1px solid rgba(231,"
},
{
"path": "pages/componentDemo/sticky4.wx",
"chars": 2253,
"preview": "<!--sticky4.ui-->\n<template>\n <view>\n <!-- 自定义导航 -->\n <ui-nav-bar slot=\"nav-bar\" custom-style=\"{{ {borderBottom:'"
},
{
"path": "pages/componentDemo/styleLib.wx",
"chars": 3756,
"preview": "<!--styleLib.ui-->\r\n<template>\r\n <view>\r\n <ui-nav-bar slot=\"nav-bar\" custom-style=\"{{ {borderBottom:'1px solid rgba("
},
{
"path": "pages/componentDemo/summary.wx",
"chars": 5102,
"preview": "<!--summary.ui-->\n<template>\n <view>\n <ui-nav-bar slot=\"nav-bar\" custom-style=\"{{ {borderBottom:'1px solid rgba(231,"
},
{
"path": "pages/componentDemo/swipeOut.wx",
"chars": 10020,
"preview": "<!--slideView.ui-->\n<template>\n <view>\n <ui-nav-bar slot=\"nav-bar\" custom-style=\"{{ {borderBottom:'1px solid rgba(23"
},
{
"path": "pages/componentDemo/swiper.wx",
"chars": 6483,
"preview": "<!--miniSwiper.ui-->\n<template>\n <view>\n <ui-nav-bar slot=\"nav-bar\" custom-style=\"{{ {borderBottom:'1px solid rgba(2"
},
{
"path": "pages/componentDemo/tabs.wx",
"chars": 10659,
"preview": "<!--tab-view.ui-->\n<template>\n <view>\n <ui-nav-bar slot=\"nav-bar\" custom-style=\"{{ {borderBottom:'1px solid rgba(231"
},
{
"path": "pages/componentDemo/tabs2.wx",
"chars": 5993,
"preview": "<template>\n <ui-nav-bar slot=\"nav-bar\" class=\"nav_bar\" custom-style=\"{{ navBarStyle }}\">\n <ui-row height=\"46\">\n "
},
{
"path": "pages/componentDemo/tabs3.wx",
"chars": 20407,
"preview": "<!--tabs4.ui-->\n<template>\n <view>\n <ui-nav-bar slot=\"nav-bar\" custom-style=\"{{ {borderBottom:'1px solid rgba(231, 2"
},
{
"path": "pages/componentDemo/tags.wx",
"chars": 9350,
"preview": "<!--tagGroup.ui-->\n<template>\n <view>\n <ui-nav-bar slot=\"nav-bar\" custom-style=\"{{ {borderBottom:'1px solid rgba(231"
},
{
"path": "pages/componentDemo/timeline.wx",
"chars": 2650,
"preview": "<!--timeline.ui-->\n<template>\n <view>\n <ui-nav-bar slot=\"nav-bar\" custom-style=\"{{ {borderBottom:'1px solid rgba(231"
},
{
"path": "pages/componentDemo/timeline2.wx",
"chars": 3070,
"preview": "<!--timeline2.ui-->\n<template>\n <view>\n <ui-nav-bar slot=\"nav-bar\" custom-style=\"{{ {borderBottom:'1px solid rgba(23"
},
{
"path": "pages/componentDemo/timeline3.wx",
"chars": 4644,
"preview": "<!--timeline3.ui-->\n<template>\n <view>\n <ui-nav-bar slot=\"nav-bar\" custom-style=\"{{ {borderBottom:'1px solid rgba(23"
},
{
"path": "pages/componentDemo/v-calendar.wx",
"chars": 5071,
"preview": "<template>\n <view>\n <ui-nav-bar slot=\"nav-bar\" custom-style=\"{{ {backgroundColor:'#fff'} }}\">\n <ui-row he"
},
{
"path": "pages/componentDemo/v-calendar2.wx",
"chars": 7942,
"preview": "<template>\n <view>\n <ui-nav-bar slot=\"nav-bar\" custom-style=\"{{ {backgroundColor:'#fff'} }}\">\n <ui-row he"
},
{
"path": "pages/componentDemo/v-calendar3.wx",
"chars": 3480,
"preview": "<template>\n <view>\n <ui-nav-bar slot=\"nav-bar\" custom-style=\"{{ {backgroundColor:'#fff'} }}\">\n <ui-row he"
},
{
"path": "pages/componentDemo/vtabs.wx",
"chars": 11122,
"preview": "<template>\n <view>\n <ui-nav-bar slot=\"nav-bar\" custom-style=\"{{ {borderBottom:'1px solid rgba(231, 231, 231, 0.6)',bac"
},
{
"path": "pages/home/about.wx",
"chars": 1437,
"preview": "<template>\n <view>\n <!-- 自定义导航 -->\n <ui-nav-bar slot=\"nav-bar\" custom-style=\"{{ {boxShadow: '0 0px 16px 0 #ccc',b"
},
{
"path": "pages/home/apiList.wx",
"chars": 2402,
"preview": "<template>\r\n <view>\r\n <ui-nav-bar slot=\"nav-bar\" custom-style=\"{{ {borderBottom:'1px solid rgba(231, 231, 231, 0.6)'"
},
{
"path": "pages/home/changeList.wx",
"chars": 2950,
"preview": "<template>\r\n <view>\r\n <ui-nav-bar slot=\"nav-bar\" custom-style=\"{{ {borderBottom:'1px solid rgba(231, 231, 231, 0.6)'"
},
{
"path": "pages/home/formList.wx",
"chars": 2395,
"preview": "<template>\r\n <view>\r\n <ui-nav-bar slot=\"nav-bar\" custom-style=\"{{ {borderBottom:'1px solid rgba(231, 231, 231, 0.6)'"
},
{
"path": "pages/home/formList3.wx",
"chars": 2717,
"preview": "<template>\r\n <view>\r\n <ui-nav-bar slot=\"nav-bar\" custom-style=\"{{ {borderBottom:'1px solid rgba(231, 231, 231, 0.6)'"
},
{
"path": "pages/home/graphicalList.wx",
"chars": 2453,
"preview": "<template>\r\n <view>\r\n <ui-nav-bar slot=\"nav-bar\" custom-style=\"{{ {borderBottom:'1px solid rgba(231, 231, 231, 0.6)'"
},
{
"path": "pages/home/graphicalList2.wx",
"chars": 2378,
"preview": "<template>\r\n <view>\r\n <ui-nav-bar slot=\"nav-bar\" custom-style=\"{{ {borderBottom:'1px solid rgba(231, 231, 231, 0.6)'"
},
{
"path": "pages/home/mapList.wx",
"chars": 2377,
"preview": "<template>\n <view>\n <ui-nav-bar slot=\"nav-bar\" custom-style=\"{{ {borderBottom:'1px solid rgba(231, 231, 231, 0.6)',b"
},
{
"path": "pages/home/mapList2.wx",
"chars": 2674,
"preview": "<template>\n <view>\n <ui-nav-bar slot=\"nav-bar\" custom-style=\"{{ {borderBottom:'1px solid rgba(231, 231, 231, 0.6)',b"
},
{
"path": "pages/home/mediaCompList.wx",
"chars": 2431,
"preview": "<template>\r\n <view>\r\n <ui-nav-bar slot=\"nav-bar\" custom-style=\"{{ {borderBottom:'1px solid rgba(231, 231, 231, 0.6)'"
},
{
"path": "pages/home/modalList.wx",
"chars": 2631,
"preview": "<template>\r\n <view>\r\n <ui-nav-bar slot=\"nav-bar\" custom-style=\"{{ {borderBottom:'1px solid rgba(231, 231, 231, 0.6)'"
},
{
"path": "pages/home/textList.wx",
"chars": 2453,
"preview": "<template>\r\n <view>\r\n <ui-nav-bar slot=\"nav-bar\" custom-style=\"{{ {borderBottom:'1px solid rgba(231, 231, 231, 0.6)'"
},
{
"path": "pages/home/viewList.wx",
"chars": 2723,
"preview": "<template>\r\n <view>\r\n <ui-nav-bar slot=\"nav-bar\" custom-style=\"{{ {borderBottom:'1px solid rgba(231, 231, 231, 0.6)'"
},
{
"path": "pages/home/viewList2.wx",
"chars": 3012,
"preview": "<template>\r\n <view>\r\n <ui-nav-bar slot=\"nav-bar\" custom-style=\"{{ {borderBottom:'1px solid rgba(231, 231, 231, 0.6)'"
},
{
"path": "pages/index.wx",
"chars": 14575,
"preview": "<template>\n <view>\n\n <!-- 自定义导航 -->\n <ui-nav-bar slot=\"nav-bar\" custom-style=\"{{ {boxShadow: '0 0px 16px 0 #ccc',"
},
{
"path": "static/data/city.js",
"chars": 41688,
"preview": "/*eslint-disable*/\n!function(){var citys=[{\"name\":\"北京\",\"children\":[{\"children\":[\"城区\",\"城区以外\"],\"name\":\"密云区\"},{\"children\":["
},
{
"path": "static/map/amap-wx.js",
"chars": 8190,
"preview": "function AMapWX(a){this.key=a.key,this.requestConfig={key:a.key,s:\"rsx\",platform:\"WXJS\",appname:a.key,sdkversion:\"1.2.0\""
},
{
"path": "static/styles/col.less",
"chars": 1276,
"preview": "@import '../utils/mixins.less';\n\n.ui-col {\n position: relative;\n min-width: 0;\n display: flex;\n flex: 1;\n height: 1"
},
{
"path": "static/styles/components.less",
"chars": 84937,
"preview": "@import '../utils/mixins.less';\r\n\r\n.ui-row-list {\r\n position: relative;\r\n\r\n &.ui-row-list-bordered {\r\n &:before {\r\n"
},
{
"path": "static/styles/icon.less",
"chars": 90695,
"preview": "\n@font-face {\n font-family: 'ui-icon';\n src: url(data:font/truetype;charset=utf-8;base64,AAEAAAALAIAAAwAwR1NVQrD+s+0AA"
},
{
"path": "static/styles/index.less",
"chars": 92,
"preview": "@import './reset';\n@import './row-list';\n@import './row';\n@import './col';\n@import './icon';"
},
{
"path": "static/styles/reset.less",
"chars": 1358,
"preview": "view {\r\n box-sizing: border-box;\r\n margin: 0;\r\n padding: 0;\r\n}\r\npage {\r\n background-color: #fff;\r\n height: 100%;\r\n "
},
{
"path": "static/styles/row-list.less",
"chars": 422,
"preview": "@import '../utils/mixins.less';\n\n.ui-row-list {\n position: relative;\n\n &.ui-row-list-bordered {\n &:before {\n ."
},
{
"path": "static/styles/row.less",
"chars": 366,
"preview": "@import '../utils/mixins.less';\n\n.ui-row {\n position: relative;\n flex: 1;\n display: flex;\n justify-content: center;\n"
},
{
"path": "static/utils/mixins.less",
"chars": 3230,
"preview": "/* 1像素解决方案 */\r\n.mix-1px (@top, @right, @bottom, @left, @color) {\r\n position: relative;\r\n\r\n @scale: 3;\r\n\r\n &:before {\r"
},
{
"path": "static/utils/system.js",
"chars": 696,
"preview": "export default {\r\n attachInfo () {\r\n let res = wx.getSystemInfoSync()\r\n\r\n wx.WIN_WIDTH = res.screenWidth\r\n wx."
}
]
About this extraction
This page contains the full source code of the uileader/touchuiwx GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 102 files (706.0 KB), approximately 276.1k tokens, and a symbol index with 7 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.