init
This commit is contained in:
779
xhs-mini-demos/entry/api/api.css
Normal file
779
xhs-mini-demos/entry/api/api.css
Normal file
@@ -0,0 +1,779 @@
|
||||
html,
|
||||
body {
|
||||
background-color: #EFF1F2;
|
||||
font-size: 100px;
|
||||
}
|
||||
|
||||
/* 组件主体 */
|
||||
.wrap {
|
||||
padding-bottom: .5rem;
|
||||
font-size: .16rem;
|
||||
}
|
||||
|
||||
/* API主体 */
|
||||
.container {
|
||||
font-size: .16rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
/* radio样式 */
|
||||
.radio {
|
||||
display: block;
|
||||
margin: 0 .17rem;
|
||||
padding: .17rem 0;
|
||||
background-color: #FFF;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: block;
|
||||
margin: 0 .17rem;
|
||||
padding: .17rem 0;
|
||||
background-color: #FFF;
|
||||
}
|
||||
|
||||
.item-scroll {
|
||||
display: flex;
|
||||
margin: 0 .17rem;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* 卡片区域 */
|
||||
.card-area {
|
||||
overflow: hidden;
|
||||
margin: .17rem .17rem 0 .17rem;
|
||||
border-radius: 6px;
|
||||
background: #FFF;
|
||||
}
|
||||
|
||||
/* 展示区 */
|
||||
.display-area {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 2.18rem;
|
||||
text-align: center;
|
||||
border-radius: 8px 8px;
|
||||
background: #FFF;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.display-area-image {
|
||||
width: 100%;
|
||||
height: 2.2rem;
|
||||
text-align: center;
|
||||
border-radius: 8px 8px 0 0;
|
||||
}
|
||||
|
||||
/* 描述文字 */
|
||||
.description {
|
||||
height: .46rem;
|
||||
padding-left: .17rem;
|
||||
line-height: .46rem;
|
||||
}
|
||||
|
||||
.top-description {
|
||||
display: flex;
|
||||
padding: .16rem .17rem;
|
||||
font-family: PingFangSC-Medium;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.top-description :first-child {
|
||||
width: 2.93rem;
|
||||
font-size: .15rem;
|
||||
}
|
||||
|
||||
.top-description :nth-child(2) {
|
||||
width: 2.45rem;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: .13rem;
|
||||
text-align: right;
|
||||
color: #999;
|
||||
}
|
||||
/* 模式标题 */
|
||||
.mode-title {
|
||||
display: flex;
|
||||
font-family: PingFangSC-Medium;
|
||||
font-size: .16rem;
|
||||
color: #000;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.mode-title-first {
|
||||
margin-top: .2rem;
|
||||
}
|
||||
|
||||
.mode-title-text {
|
||||
margin: 0 .12rem;
|
||||
}
|
||||
|
||||
.mode-title-line-left {
|
||||
width: .23rem;
|
||||
height: 1px;
|
||||
border-radius: 3px;
|
||||
background-image: linear-gradient(90deg, #F5F5F5 0%, #D5D5D5 100%);
|
||||
}
|
||||
|
||||
.mode-title-line-right {
|
||||
width: .23rem;
|
||||
height: 1px;
|
||||
border-radius: 3px;
|
||||
background-image: linear-gradient(-90deg, #F5F5F5 0%, #D5D5D5 100%);
|
||||
}
|
||||
|
||||
/* 结果文字 */
|
||||
.result-area {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 1.3rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.result-area-fail {
|
||||
width: 2.4rem;
|
||||
margin: 0 auto;
|
||||
font-size: .24rem;
|
||||
text-align: center;
|
||||
color: #F7534F;
|
||||
}
|
||||
|
||||
.result-area-default {
|
||||
width: 2.4rem;
|
||||
margin: 0 auto;
|
||||
font-size: .24rem;
|
||||
text-align: center;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.result-area-succ {
|
||||
width: 2.4rem;
|
||||
margin: 0 auto;
|
||||
font-size: .24rem;
|
||||
text-align: center;
|
||||
color: #38F;
|
||||
}
|
||||
|
||||
.result-area-tips {
|
||||
margin-top: .08rem;
|
||||
font-size: .14rem;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 按纽区 */
|
||||
.button-group {
|
||||
margin: .3rem 0 .2rem 0;
|
||||
}
|
||||
|
||||
swan-button {
|
||||
margin: .2rem .23rem;
|
||||
font-size: .18rem;
|
||||
line-height: .44rem;
|
||||
}
|
||||
|
||||
.flex-button {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: #FFF;
|
||||
}
|
||||
|
||||
/* 一个列表项，和border一起使用 */
|
||||
.list-area {
|
||||
margin: 0 .17rem;
|
||||
padding: .14rem 0;
|
||||
font-family: PingFangSC-Regular;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.list-item-key-4 {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.list-item-key-6 {
|
||||
display: inline-block;
|
||||
width: 1.2rem;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.list-item-value {
|
||||
display: inline-block;
|
||||
width: 2.2rem;
|
||||
vertical-align: middle;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.option-active {
|
||||
background: #F2F2F2;
|
||||
}
|
||||
|
||||
/* 提示 */
|
||||
.tip-week {
|
||||
margin: 0 .14rem .18rem;
|
||||
font-size: .12rem;
|
||||
line-height: .2rem;
|
||||
text-align: center;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.tip-strong {
|
||||
padding: .11rem .23rem;
|
||||
font-size: .1rem;
|
||||
/* height: .57rem; */
|
||||
text-align: center;
|
||||
color: #EE823A;
|
||||
border-radius: 8px 8px 0 0 ;
|
||||
background-color: #FFF9E3;
|
||||
}
|
||||
|
||||
/* ai 列表样式 */
|
||||
.result-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.result-item:not(:last-of-type) {
|
||||
margin-bottom: .24rem;
|
||||
}
|
||||
|
||||
.result-item-key-4 {
|
||||
width: .66rem;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.result-item-key-6 {
|
||||
width: .9rem;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.result-item-value {
|
||||
width: 2.5rem;
|
||||
margin-left: .19rem;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.result-item-value-err {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 底部标识title */
|
||||
.page-title {
|
||||
margin: 1rem 0 .3rem 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.page-title-line {
|
||||
width: .83rem;
|
||||
height: .02rem;
|
||||
margin: 0 auto;
|
||||
background-color: #E6E6E6;
|
||||
}
|
||||
|
||||
.page-title-text {
|
||||
margin-top: .07rem;
|
||||
color: #CCC;
|
||||
}
|
||||
|
||||
.page-top {
|
||||
margin-top: .36rem;
|
||||
text-align: center;
|
||||
}
|
||||
.page-top-line {
|
||||
position: relative;
|
||||
width: .54rem;
|
||||
height: .01rem;
|
||||
margin: 0 auto;
|
||||
border: 0;
|
||||
background-color: #979797;
|
||||
}
|
||||
.page-top-text {
|
||||
margin-bottom: .1rem;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 上下左右边框 */
|
||||
.border-top {
|
||||
position: relative;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.border-top:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: #E6E6E6;
|
||||
-webkit-transform-origin: 0 0;
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
|
||||
.border-right {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.border-right:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 1px;
|
||||
background: #E6E6E6;
|
||||
-webkit-transform-origin: 100% 0;
|
||||
transform-origin: 100% 0;
|
||||
}
|
||||
|
||||
.border-bottom {
|
||||
position: relative;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.border-bottom:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: #E6E6E6;
|
||||
-webkit-transform-origin: 0 100%;
|
||||
transform-origin: 0 100%;
|
||||
}
|
||||
|
||||
.border-left {
|
||||
position: relative;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.border-left:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
background: #E6E6E6;
|
||||
-webkit-transform-origin: left center;
|
||||
transform-origin: left center;
|
||||
}
|
||||
|
||||
.border-all {
|
||||
position: relative;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.border-all:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #E6E6E6;
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
border-radius: 0;
|
||||
background: 0 0;
|
||||
-webkit-transform-origin: 0 0;
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
|
||||
/* 组件样式 */
|
||||
.title {
|
||||
padding: .3rem .22rem .18rem .22rem;
|
||||
font-size: .15rem;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
|
||||
|
||||
swan-button[type="primary"] {
|
||||
background: #38F;
|
||||
}
|
||||
|
||||
/* 适配各种屏幕 */
|
||||
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
|
||||
not all {
|
||||
.border-top:before,
|
||||
.border-bottom:after {
|
||||
-webkit-transform: scaleY(.66666667);
|
||||
transform: scaleY(.66666667);
|
||||
}
|
||||
|
||||
.border-right:after,
|
||||
.border-left:before {
|
||||
-webkit-transform: scaleX(.66666667);
|
||||
transform: scaleX(.66666667);
|
||||
}
|
||||
|
||||
.border-all:before {
|
||||
width: 150%;
|
||||
height: 150%;
|
||||
-webkit-transform: scale(.66666667);
|
||||
transform: scale(.66666667);
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (-webkit-min-device-pixel-ratio: 2),
|
||||
not all {
|
||||
.border-top:before,
|
||||
.border-bottom:after {
|
||||
-webkit-transform: scaleY(.5);
|
||||
transform: scaleY(.5);
|
||||
}
|
||||
|
||||
.border-right:after,
|
||||
.border-left:before {
|
||||
-webkit-transform: scaleX(.5);
|
||||
transform: scaleX(.5);
|
||||
}
|
||||
|
||||
.border-all:before {
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
-webkit-transform: scale(.48);
|
||||
transform: scale(.48);
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (-webkit-min-device-pixel-ratio: 3),
|
||||
not all {
|
||||
.border-top:before,
|
||||
.border-bottom:after {
|
||||
-webkit-transform: scaleY(.33333333);
|
||||
transform: scaleY(.33333333);
|
||||
}
|
||||
|
||||
.border-right:after,
|
||||
.border-left:before {
|
||||
-webkit-transform: scaleX(.33333333);
|
||||
transform: scaleX(.33333333);
|
||||
}
|
||||
|
||||
.border-all:before {
|
||||
width: 300%;
|
||||
height: 300%;
|
||||
-webkit-transform: scale(.3326);
|
||||
transform: scale(.3326);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 320px) {
|
||||
html {
|
||||
font-size: 77.2946px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 375px) {
|
||||
html {
|
||||
font-size: 90.5797px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 414px) {
|
||||
html {
|
||||
font-size: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.card-area {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.top-bar view {
|
||||
z-index: 999;
|
||||
background-color: #EFF1F2;
|
||||
}
|
||||
|
||||
.fixTopBar {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
height: 53px;
|
||||
}
|
||||
|
||||
.fixTopBarBlock {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.fixTopBarText {
|
||||
font-family: PingFangSC-Medium;
|
||||
font-size: .18rem;
|
||||
color: #000;
|
||||
text-align: center;
|
||||
line-height: .18rem;
|
||||
}
|
||||
|
||||
.flex {
|
||||
height: .53rem;
|
||||
font-size: .16rem;
|
||||
display: flex;
|
||||
justify-content: center; /* 水平居中 */
|
||||
align-items: center; /* 垂直居中 */
|
||||
}
|
||||
|
||||
.group {
|
||||
font-size: .15rem;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.group-hd {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding-top: .58rem;
|
||||
}
|
||||
|
||||
.group-hd-txt {
|
||||
color: #999;
|
||||
margin-top: .1rem;
|
||||
letter-spacing: .05rem;
|
||||
}
|
||||
|
||||
.item-border-bottom:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
-webkit-transform-origin: 0 100%;
|
||||
transform-origin: 0 100%;
|
||||
background: #e6e6e6;
|
||||
}
|
||||
|
||||
.group-logo {
|
||||
width: 1.99rem;
|
||||
}
|
||||
|
||||
.group-desc {
|
||||
text-align: center;
|
||||
color: #999;
|
||||
margin-top: .14rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.group-bd {
|
||||
border-top: 7px solid #f5f5f5;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.group-bd:last-child {
|
||||
border-bottom: .25rem solid #f5f5f5;
|
||||
}
|
||||
|
||||
.item {
|
||||
padding: .20rem 0;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.border-bottom {
|
||||
border: 0;
|
||||
margin: 0 .17rem;
|
||||
}
|
||||
|
||||
|
||||
.item-logo {
|
||||
display: inline-block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.item-desc {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
margin-left: 8px;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.item-toggle {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 12px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.item-toggle-extend {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
height: 12px !important;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.sub-item {
|
||||
position: relative;
|
||||
padding: 16px 0;
|
||||
padding-left: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.sub-item:last-child:after {
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.sub-item-goto {
|
||||
position: absolute;
|
||||
right: .23rem;
|
||||
}
|
||||
|
||||
.sub-item-desc-tra {
|
||||
margin-left: .17rem;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.sub-item-desc {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
||||
.search {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
padding: 0 16px;
|
||||
z-index: 1;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
position: relative;
|
||||
display: flex;
|
||||
height: 44px;
|
||||
font-size: .14rem;
|
||||
color: #ccc;
|
||||
border-radius: 100px;
|
||||
background-color: #fff;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.search-box:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
box-sizing: border-box;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
border: 1px solid #e6e6e6;
|
||||
border-radius: 100px;
|
||||
transform: scale(.5);
|
||||
transform-origin: 0 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.search-icon {
|
||||
width: .18rem;
|
||||
height: .18rem;
|
||||
margin: 0 .08rem 0 .24rem;
|
||||
background: url(https://b.bdstatic.com/searchbox/icms/searchbox/img/search.png) no-repeat center;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.search-icon image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.hover {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hover::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
bottom: 5px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: rgba(255, 255, 255, 0.7);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.page {
|
||||
position: relative;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.head-bg {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.head-bg-logo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.head-bg-logo > view {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.head-bg-img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.card-container {
|
||||
padding: 16px;
|
||||
padding-top: 24px;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
background-color: white;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.card-item {
|
||||
padding: 18px 0;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0 16px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.card-item::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
height: 1px;
|
||||
background: #efefef;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.card-item-last::after {
|
||||
content: "";
|
||||
height: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.card-item-extend {
|
||||
margin: 0 16px;
|
||||
}
|
||||
70
xhs-mini-demos/entry/api/api.js
Normal file
70
xhs-mini-demos/entry/api/api.js
Normal file
@@ -0,0 +1,70 @@
|
||||
/* global Page, xhs */
|
||||
|
||||
const apiItems = require('../../config');
|
||||
|
||||
Page({
|
||||
|
||||
data: {
|
||||
/**
|
||||
* 以下文档中有的但是没有相应展示组件的会标识todo
|
||||
*/
|
||||
items: apiItems.api,
|
||||
fixTop: 0,
|
||||
statusBarHeight: xhs.getSystemInfoSync().statusBarHeight
|
||||
},
|
||||
|
||||
onLoad(e) {
|
||||
let t = this;
|
||||
xhs.createSelectorQuery().select('.group-logo').boundingClientRect(function (rect) {
|
||||
t.data.fixTop = rect.top;
|
||||
}).exec();
|
||||
this.setData({isSetTabBarPage: !!e.data});
|
||||
},
|
||||
|
||||
toggleClick(e) {
|
||||
// console.log('e', e, e.currentTarget.dataset.id)
|
||||
// 无子项直接跳转
|
||||
let apiName = e.currentTarget.dataset.id;
|
||||
// if (apiName) {
|
||||
// xhs.navigateTo({
|
||||
// url: '/component/' + apiName + '/' + apiName
|
||||
// });
|
||||
// return;
|
||||
// }
|
||||
|
||||
// 子项展开与收起
|
||||
const index = e.currentTarget.dataset.index;
|
||||
const items = this.data.items;
|
||||
this.setData(`items[${index}].open`, !items[index].open);
|
||||
},
|
||||
|
||||
oneItemClick(e) {
|
||||
let apiName = e.currentTarget.dataset.id;
|
||||
let show = e.currentTarget.dataset.show;
|
||||
if (show === 'no') {
|
||||
xhs.showToast({
|
||||
title: '该项能力暂不支持',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (show === 'not') {
|
||||
xhs.showToast({
|
||||
title: '未开放，敬请期待',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
xhs.navigateTo({
|
||||
url: '/api-case/' + apiName + '/' + apiName
|
||||
});
|
||||
},
|
||||
|
||||
openSearch() {
|
||||
xhs.navigateTo({
|
||||
url: '/entry/search/search'
|
||||
});
|
||||
}
|
||||
});
|
||||
6
xhs-mini-demos/entry/api/api.json
Normal file
6
xhs-mini-demos/entry/api/api.json
Normal file
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"navigationBarTitleText": "小红书小程序示例",
|
||||
"backgroundColor": "#EFF1F2",
|
||||
"navigationStyle": "custom",
|
||||
"usingComponents": {}
|
||||
}
|
||||
39
xhs-mini-demos/entry/api/api.xhsml
Normal file
39
xhs-mini-demos/entry/api/api.xhsml
Normal file
@@ -0,0 +1,39 @@
|
||||
<view class="page">
|
||||
<view class="head-bg">
|
||||
<view class="head-bg-logo">
|
||||
<image style="width: 154px;" src="../../image/logo.png" mode="widthFix"/>
|
||||
<view>官方演示小程序</view>
|
||||
</view>
|
||||
<view class="search">
|
||||
<view class="search-box" bindtap="openSearch">
|
||||
<view class="search-icon">
|
||||
<image src="../../image/search_1.5.png"></image>
|
||||
</view>
|
||||
<text>搜索组件、能力或指南</text>
|
||||
</view>
|
||||
</view>
|
||||
<image class="head-bg-img" src="../../image/Union.png" mode="widthFix"/>
|
||||
</view>
|
||||
|
||||
<view class="card-container">
|
||||
<view class="card-content">
|
||||
<view xhs:for-items="{{items}}" xhs:for-item="item" xhs:key="*item">
|
||||
<view class="card-item {{item.open ? '' : 'item-close'}} {{index+1 === items.length && !item.open ? 'card-item-last' : ''}}" bindtap="toggleClick" data-index="{{index}}" data-id="{{item.id}}">
|
||||
<image class="item-logo" src="{{item.icon}}"></image>
|
||||
<text class="item-desc">{{item.name}}</text>
|
||||
<image xhs:if="{{item.id}}" class="item-logo item-toggle" src="https://b.bdstatic.com/searchbox/icms/searchbox/img/right_arrow.png"></image>
|
||||
<image xhs:else class="item-logo item-toggle" src="{{item.open ? '../../image/top.png' : '../../image/bottom.png'}}" mode="widthFix"></image>
|
||||
</view>
|
||||
<view xhs:if="{{item.open}}" class="card-item-extend">
|
||||
<view hover-class="hover" xhs:for-items="{{item.list}}" xhs:for-item="subItem" bindtap="oneItemClick" data-id="{{subItem.id}}" data-show="{{subItem.show}}">
|
||||
<view class="sub-item">
|
||||
<text class="sub-item-desc">{{subItem.subName}}</text>
|
||||
<text class="sub-item-desc-tra">{{subItem.subNameTra}}</text>
|
||||
<image class="item-logo item-toggle-extend" src="../../image/right.png" mode="heightFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
778
xhs-mini-demos/entry/component/component.css
Normal file
778
xhs-mini-demos/entry/component/component.css
Normal file
@@ -0,0 +1,778 @@
|
||||
html,
|
||||
body {
|
||||
background-color: #EFF1F2;
|
||||
font-size: 100px;
|
||||
}
|
||||
|
||||
/* 组件主体 */
|
||||
.wrap {
|
||||
padding-bottom: .5rem;
|
||||
font-size: .16rem;
|
||||
}
|
||||
|
||||
/* API主体 */
|
||||
.container {
|
||||
font-size: .16rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
/* radio样式 */
|
||||
.radio {
|
||||
display: block;
|
||||
margin: 0 .17rem;
|
||||
padding: .17rem 0;
|
||||
background-color: #FFF;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: block;
|
||||
margin: 0 .17rem;
|
||||
padding: .17rem 0;
|
||||
background-color: #FFF;
|
||||
}
|
||||
|
||||
.item-scroll {
|
||||
display: flex;
|
||||
margin: 0 .17rem;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* 卡片区域 */
|
||||
.card-area {
|
||||
overflow: hidden;
|
||||
margin: .17rem .17rem 0 .17rem;
|
||||
border-radius: 6px;
|
||||
background: #FFF;
|
||||
}
|
||||
|
||||
/* 展示区 */
|
||||
.display-area {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 2.18rem;
|
||||
text-align: center;
|
||||
border-radius: 8px 8px;
|
||||
background: #FFF;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.display-area-image {
|
||||
width: 100%;
|
||||
height: 2.2rem;
|
||||
text-align: center;
|
||||
border-radius: 8px 8px 0 0;
|
||||
}
|
||||
|
||||
/* 描述文字 */
|
||||
.description {
|
||||
height: .46rem;
|
||||
padding-left: .17rem;
|
||||
line-height: .46rem;
|
||||
}
|
||||
|
||||
.top-description {
|
||||
display: flex;
|
||||
padding: .16rem .17rem;
|
||||
font-family: PingFangSC-Medium;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.top-description :first-child {
|
||||
width: 2.93rem;
|
||||
font-size: .15rem;
|
||||
}
|
||||
|
||||
.top-description :nth-child(2) {
|
||||
width: 2.45rem;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: .13rem;
|
||||
text-align: right;
|
||||
color: #999;
|
||||
}
|
||||
/* 模式标题 */
|
||||
.mode-title {
|
||||
display: flex;
|
||||
font-family: PingFangSC-Medium;
|
||||
font-size: .16rem;
|
||||
color: #000;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.mode-title-first {
|
||||
margin-top: .2rem;
|
||||
}
|
||||
|
||||
.mode-title-text {
|
||||
margin: 0 .12rem;
|
||||
}
|
||||
|
||||
.mode-title-line-left {
|
||||
width: .23rem;
|
||||
height: 1px;
|
||||
border-radius: 3px;
|
||||
background-image: linear-gradient(90deg, #F5F5F5 0%, #D5D5D5 100%);
|
||||
}
|
||||
|
||||
.mode-title-line-right {
|
||||
width: .23rem;
|
||||
height: 1px;
|
||||
border-radius: 3px;
|
||||
background-image: linear-gradient(-90deg, #F5F5F5 0%, #D5D5D5 100%);
|
||||
}
|
||||
|
||||
/* 结果文字 */
|
||||
.result-area {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 1.3rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.result-area-fail {
|
||||
width: 2.4rem;
|
||||
margin: 0 auto;
|
||||
font-size: .24rem;
|
||||
text-align: center;
|
||||
color: #F7534F;
|
||||
}
|
||||
|
||||
.result-area-default {
|
||||
width: 2.4rem;
|
||||
margin: 0 auto;
|
||||
font-size: .24rem;
|
||||
text-align: center;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.result-area-succ {
|
||||
width: 2.4rem;
|
||||
margin: 0 auto;
|
||||
font-size: .24rem;
|
||||
text-align: center;
|
||||
color: #38F;
|
||||
}
|
||||
|
||||
.result-area-tips {
|
||||
margin-top: .08rem;
|
||||
font-size: .14rem;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 按纽区 */
|
||||
.button-group {
|
||||
margin: .3rem 0 .2rem 0;
|
||||
}
|
||||
|
||||
swan-button {
|
||||
margin: .2rem .23rem;
|
||||
font-size: .18rem;
|
||||
line-height: .44rem;
|
||||
}
|
||||
|
||||
.flex-button {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: #FFF;
|
||||
}
|
||||
|
||||
/* 一个列表项，和border一起使用 */
|
||||
.list-area {
|
||||
margin: 0 .17rem;
|
||||
padding: .14rem 0;
|
||||
font-family: PingFangSC-Regular;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.list-item-key-4 {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.list-item-key-6 {
|
||||
display: inline-block;
|
||||
width: 1.2rem;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.list-item-value {
|
||||
display: inline-block;
|
||||
width: 2.2rem;
|
||||
vertical-align: middle;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.option-active {
|
||||
background: #F2F2F2;
|
||||
}
|
||||
|
||||
/* 提示 */
|
||||
.tip-week {
|
||||
margin: 0 .14rem .18rem;
|
||||
font-size: .12rem;
|
||||
line-height: .2rem;
|
||||
text-align: center;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.tip-strong {
|
||||
padding: .11rem .23rem;
|
||||
font-size: .1rem;
|
||||
/* height: .57rem; */
|
||||
text-align: center;
|
||||
color: #EE823A;
|
||||
border-radius: 8px 8px 0 0 ;
|
||||
background-color: #FFF9E3;
|
||||
}
|
||||
|
||||
/* ai 列表样式 */
|
||||
.result-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.result-item:not(:last-of-type) {
|
||||
margin-bottom: .24rem;
|
||||
}
|
||||
|
||||
.result-item-key-4 {
|
||||
width: .66rem;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.result-item-key-6 {
|
||||
width: .9rem;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.result-item-value {
|
||||
width: 2.5rem;
|
||||
margin-left: .19rem;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.result-item-value-err {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 底部标识title */
|
||||
.page-title {
|
||||
margin: 1rem 0 .3rem 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.page-title-line {
|
||||
width: .83rem;
|
||||
height: .02rem;
|
||||
margin: 0 auto;
|
||||
background-color: #E6E6E6;
|
||||
}
|
||||
|
||||
.page-title-text {
|
||||
margin-top: .07rem;
|
||||
color: #CCC;
|
||||
}
|
||||
|
||||
.page-top {
|
||||
margin-top: .36rem;
|
||||
text-align: center;
|
||||
}
|
||||
.page-top-line {
|
||||
position: relative;
|
||||
width: .54rem;
|
||||
height: .01rem;
|
||||
margin: 0 auto;
|
||||
border: 0;
|
||||
background-color: #979797;
|
||||
}
|
||||
.page-top-text {
|
||||
margin-bottom: .1rem;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 上下左右边框 */
|
||||
.border-top {
|
||||
position: relative;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.border-top:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: #E6E6E6;
|
||||
-webkit-transform-origin: 0 0;
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
|
||||
.border-right {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.border-right:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 1px;
|
||||
background: #E6E6E6;
|
||||
-webkit-transform-origin: 100% 0;
|
||||
transform-origin: 100% 0;
|
||||
}
|
||||
|
||||
.border-bottom {
|
||||
position: relative;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.border-bottom:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: #E6E6E6;
|
||||
-webkit-transform-origin: 0 100%;
|
||||
transform-origin: 0 100%;
|
||||
}
|
||||
|
||||
.border-left {
|
||||
position: relative;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.border-left:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
background: #E6E6E6;
|
||||
-webkit-transform-origin: left center;
|
||||
transform-origin: left center;
|
||||
}
|
||||
|
||||
.border-all {
|
||||
position: relative;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.border-all:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #E6E6E6;
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
border-radius: 0;
|
||||
background: 0 0;
|
||||
-webkit-transform-origin: 0 0;
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
|
||||
/* 组件样式 */
|
||||
.title {
|
||||
padding: .3rem .22rem .18rem .22rem;
|
||||
font-size: .15rem;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
|
||||
|
||||
swan-button[type="primary"] {
|
||||
background: #38F;
|
||||
}
|
||||
|
||||
/* 适配各种屏幕 */
|
||||
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
|
||||
not all {
|
||||
.border-top:before,
|
||||
.border-bottom:after {
|
||||
-webkit-transform: scaleY(.66666667);
|
||||
transform: scaleY(.66666667);
|
||||
}
|
||||
|
||||
.border-right:after,
|
||||
.border-left:before {
|
||||
-webkit-transform: scaleX(.66666667);
|
||||
transform: scaleX(.66666667);
|
||||
}
|
||||
|
||||
.border-all:before {
|
||||
width: 150%;
|
||||
height: 150%;
|
||||
-webkit-transform: scale(.66666667);
|
||||
transform: scale(.66666667);
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (-webkit-min-device-pixel-ratio: 2),
|
||||
not all {
|
||||
.border-top:before,
|
||||
.border-bottom:after {
|
||||
-webkit-transform: scaleY(.5);
|
||||
transform: scaleY(.5);
|
||||
}
|
||||
|
||||
.border-right:after,
|
||||
.border-left:before {
|
||||
-webkit-transform: scaleX(.5);
|
||||
transform: scaleX(.5);
|
||||
}
|
||||
|
||||
.border-all:before {
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
-webkit-transform: scale(.48);
|
||||
transform: scale(.48);
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (-webkit-min-device-pixel-ratio: 3),
|
||||
not all {
|
||||
.border-top:before,
|
||||
.border-bottom:after {
|
||||
-webkit-transform: scaleY(.33333333);
|
||||
transform: scaleY(.33333333);
|
||||
}
|
||||
|
||||
.border-right:after,
|
||||
.border-left:before {
|
||||
-webkit-transform: scaleX(.33333333);
|
||||
transform: scaleX(.33333333);
|
||||
}
|
||||
|
||||
.border-all:before {
|
||||
width: 300%;
|
||||
height: 300%;
|
||||
-webkit-transform: scale(.3326);
|
||||
transform: scale(.3326);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 320px) {
|
||||
html {
|
||||
font-size: 77.2946px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 375px) {
|
||||
html {
|
||||
font-size: 90.5797px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 414px) {
|
||||
html {
|
||||
font-size: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.card-area {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.top-bar view {
|
||||
z-index: 999;
|
||||
background-color: #EFF1F2;
|
||||
}
|
||||
|
||||
.fixTopBar {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
height: 53px;
|
||||
}
|
||||
|
||||
.fixTopBarBlock {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.fixTopBarText {
|
||||
font-family: PingFangSC-Medium;
|
||||
font-size: .18rem;
|
||||
color: #000;
|
||||
text-align: center;
|
||||
line-height: .18rem;
|
||||
}
|
||||
|
||||
.flex {
|
||||
height: .53rem;
|
||||
font-size: .16rem;
|
||||
display: flex;
|
||||
justify-content: center; /* 水平居中 */
|
||||
align-items: center; /* 垂直居中 */
|
||||
}
|
||||
|
||||
.group {
|
||||
font-size: .15rem;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.group-hd {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding-top: .58rem;
|
||||
}
|
||||
|
||||
.group-hd-txt {
|
||||
color: #999;
|
||||
margin-top: .1rem;
|
||||
letter-spacing: .05rem;
|
||||
}
|
||||
|
||||
.item-border-bottom:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
-webkit-transform-origin: 0 100%;
|
||||
transform-origin: 0 100%;
|
||||
background: #e6e6e6;
|
||||
}
|
||||
|
||||
.group-logo {
|
||||
width: 1.99rem;
|
||||
}
|
||||
|
||||
.group-desc {
|
||||
text-align: center;
|
||||
color: #999;
|
||||
margin-top: .14rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.group-bd {
|
||||
border-top: 7px solid #f5f5f5;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.group-bd:last-child {
|
||||
border-bottom: .25rem solid #f5f5f5;
|
||||
}
|
||||
|
||||
.item {
|
||||
padding: .20rem 0;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.border-bottom {
|
||||
border: 0;
|
||||
margin: 0 .17rem;
|
||||
}
|
||||
|
||||
|
||||
.item-logo {
|
||||
display: inline-block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.item-desc {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
margin-left: 8px;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.item-toggle {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 12px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.item-toggle-extend {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
height: 12px !important;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.sub-item {
|
||||
position: relative;
|
||||
padding: 16px 0;
|
||||
padding-left: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.sub-item:last-child:after {
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.sub-item-goto {
|
||||
position: absolute;
|
||||
right: .23rem;
|
||||
}
|
||||
|
||||
.sub-item-desc-tra {
|
||||
margin-left: .17rem;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.sub-item-desc {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.search {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
padding: 0 16px;
|
||||
z-index: 1;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
position: relative;
|
||||
display: flex;
|
||||
height: 44px;
|
||||
font-size: .14rem;
|
||||
color: #ccc;
|
||||
border-radius: 100px;
|
||||
background-color: #fff;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.search-box:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
box-sizing: border-box;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
border: 1px solid #e6e6e6;
|
||||
border-radius: 100px;
|
||||
transform: scale(.5);
|
||||
transform-origin: 0 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.search-icon {
|
||||
width: .18rem;
|
||||
height: .18rem;
|
||||
margin: 0 .08rem 0 .24rem;
|
||||
background: url(https://b.bdstatic.com/searchbox/icms/searchbox/img/search.png) no-repeat center;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.search-icon image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.hover {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hover::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
bottom: 5px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: rgba(255, 255, 255, 0.7);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.page {
|
||||
position: relative;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.head-bg {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.head-bg-logo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.head-bg-logo > view {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.head-bg-img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.card-container {
|
||||
padding: 16px;
|
||||
padding-top: 24px;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
background-color: white;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.card-item {
|
||||
padding: 18px 0;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0 16px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.card-item::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
height: 1px;
|
||||
background: #efefef;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.card-item-last::after {
|
||||
content: "";
|
||||
height: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.card-item-extend {
|
||||
margin: 0 16px;
|
||||
}
|
||||
115
xhs-mini-demos/entry/component/component.js
Normal file
115
xhs-mini-demos/entry/component/component.js
Normal file
@@ -0,0 +1,115 @@
|
||||
/**
|
||||
* @file demo page for component
|
||||
* @author sunbai
|
||||
*/
|
||||
|
||||
/* global Page, xhs */
|
||||
|
||||
const componentItems = require('../../config');
|
||||
|
||||
Page({
|
||||
// 验证首页生命周期
|
||||
onUnload(){
|
||||
xhs.request({
|
||||
url: 'https://spider-tracker.xiaohongshu.com/api/data/onUnload',
|
||||
method: 'POST',
|
||||
});
|
||||
},
|
||||
onHide(){
|
||||
xhs.request({
|
||||
url: 'https://spider-tracker.xiaohongshu.com/api/data/onHide',
|
||||
method: 'POST',
|
||||
});
|
||||
},
|
||||
onShow(){
|
||||
xhs.request({
|
||||
url: 'https://spider-tracker.xiaohongshu.com/api/data/onShow',
|
||||
method: 'POST',
|
||||
});
|
||||
},
|
||||
data: {
|
||||
items: componentItems.component,
|
||||
statusBarHeight: xhs.getSystemInfoSync().statusBarHeight,
|
||||
scrollTop: 0, // 滑动条离顶部的距离
|
||||
fixTop: 0,
|
||||
fixTopBar: false
|
||||
},
|
||||
onLoad(e) {
|
||||
setTimeout(() => {
|
||||
this.removeSkeleton();
|
||||
}, 500);
|
||||
// lottie页面需要判断版本
|
||||
const t = this;
|
||||
xhs.getSystemInfo({
|
||||
success: res => {
|
||||
let version = t.compareVersion('11.2', res.version);
|
||||
if (res.platform === 'ios' && version) {
|
||||
t.data.items[1].list[3].id = 'update';
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
xhs.createSelectorQuery().select('.group-logo').boundingClientRect(function (rect) {
|
||||
t.data.fixTop = rect.top;
|
||||
}).exec();
|
||||
this.setData({ isSetTabBarPage: !!e.data });
|
||||
|
||||
setTimeout(() => {
|
||||
// this.removeSkeleton && this.removeSkeleton();
|
||||
setTimeout(() => {
|
||||
xhs.pageScrollTo({
|
||||
scrollTop: 100
|
||||
});
|
||||
}, 2000);
|
||||
}, 2000);
|
||||
},
|
||||
compareVersion(v1, v2) {
|
||||
v1 = v1.split('.');
|
||||
v2 = v2.split('.');
|
||||
let len = Math.max(v1.length, v2.length);
|
||||
while (v1.length < len) {
|
||||
v1.push('0');
|
||||
}
|
||||
while (v2.length < len) {
|
||||
v2.push('0');
|
||||
}
|
||||
for (let i = 0; i < len; i++) {
|
||||
let num1 = parseInt(v1[i], 10);
|
||||
let num2 = parseInt(v2[i], 10);
|
||||
if (num1 > num2) {
|
||||
return 1;
|
||||
}
|
||||
else if (num1 < num2) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
oneItemClick: e => {
|
||||
let viewName = e.currentTarget.dataset.id;
|
||||
xhs.navigateTo({
|
||||
url: '/component-case/' + viewName + '/' + viewName
|
||||
});
|
||||
},
|
||||
toggleClick(e) {
|
||||
console.log('e', e, e.currentTarget.dataset.id);
|
||||
// 无子项直接跳转
|
||||
let apiName = e.currentTarget.dataset.id;
|
||||
// if (apiName) {
|
||||
// xhs.navigateTo({
|
||||
// url: '/component-case/' + apiName + '/' + apiName
|
||||
// });
|
||||
// return;
|
||||
// }
|
||||
|
||||
// 子项展开与收起
|
||||
const index = e.currentTarget.dataset.index;
|
||||
const items = this.data.items;
|
||||
this.setData(`items[${index}].open`, !items[index].open);
|
||||
},
|
||||
openSearch() {
|
||||
xhs.navigateTo({
|
||||
url: '/entry/search/search'
|
||||
});
|
||||
}
|
||||
});
|
||||
13
xhs-mini-demos/entry/component/component.json
Normal file
13
xhs-mini-demos/entry/component/component.json
Normal file
@@ -0,0 +1,13 @@
|
||||
{
|
||||
"navigationBarTitleText": "小程序示例",
|
||||
"backgroundColor": "#EFF1F2",
|
||||
"navigationStyle": "custom",
|
||||
"usingComponents": {},
|
||||
"skeleton": {
|
||||
"options": {
|
||||
"minGrayBlockWidth": 0,
|
||||
"animation": "shine2"
|
||||
},
|
||||
"path": "component.skeleton.xhsml"
|
||||
}
|
||||
}
|
||||
27
xhs-mini-demos/entry/component/component.skeleton.css
Normal file
27
xhs-mini-demos/entry/component/component.skeleton.css
Normal file
File diff suppressed because one or more lines are too long
108
xhs-mini-demos/entry/component/component.skeleton.xhsml
Normal file
108
xhs-mini-demos/entry/component/component.skeleton.xhsml
Normal file
@@ -0,0 +1,108 @@
|
||||
<view class="page xhs_0_page" style="border-color: rgb(238, 238, 238);">
|
||||
<view class="head-bg xhs_0_head-bg" data-skeleton-bgcolor='"#f60"' style="border-color: rgb(238, 238, 238); color: transparent;">
|
||||
<view class="head-bg-logo xhs_0_head-bg-logo" style="border-color: rgb(238, 238, 238);">
|
||||
<image src="" mode="widthFix" style="width: 154px; height: 55px; border-color: rgb(238, 238, 238);" class="sk-animation-shine-2" width="154" height="55" />
|
||||
<view style="border-color: rgb(238, 238, 238);">
|
||||
<view class="skeleton-text-block-mark sk-animation-shine-2" style="display: inline-block; position: relative; background-position-x: 0%;">
|
||||
官方演示小程序
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="search xhs_0_search" style="border-color: rgb(238, 238, 238);">
|
||||
<view class="search-box xhs_0_search-box sk-pseudo" style="border-color: rgb(238, 238, 238);">
|
||||
<view class="search-icon xhs_0_search-icon" style="background: rgb(238, 238, 238); border-color: rgb(238, 238, 238);">
|
||||
<image src="" class="sk-animation-shine-2" width="18" height="18" style="border-color: rgb(238, 238, 238);" />
|
||||
</view>
|
||||
<text style="--text-display: inline; --text-selectable: none; border-color: rgb(238, 238, 238); position: relative; background-position-x: 0%;" class="sk-animation-shine-2 skeleton-text-block-mark">
|
||||
搜索组件、能力或指南
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<image class="head-bg-img xhs_0_head-bg-img sk-animation-shine-2" src="" mode="widthFix" style="height: 339.413px; border-color: rgb(238, 238, 238);" width="430" height="339.40625" />
|
||||
</view>
|
||||
<view class="card-container xhs_0_card-container" style="border-color: rgb(238, 238, 238);">
|
||||
<view class="card-content xhs_0_card-content" style="border-color: rgb(238, 238, 238);">
|
||||
<view style="border-color: rgb(238, 238, 238);">
|
||||
<view class="card-item xhs_0_card-item item-close xhs_0_item-close sk-pseudo" data-index="0" style="border-color: rgb(238, 238, 238);">
|
||||
<image class="item-logo xhs_0_item-logo sk-animation-shine-2" src="" observe-id="24" width="24" height="24" style="border-color: rgb(238, 238, 238);" />
|
||||
<text class="item-desc xhs_0_item-desc sk-animation-shine-2 skeleton-text-block-mark" style="--text-display: inline; --text-selectable: none; border-color: rgb(238, 238, 238); position: relative; background-position-x: 0%;">
|
||||
业务组件
|
||||
</text>
|
||||
<image class="item-logo xhs_0_item-logo item-toggle xhs_0_item-toggle sk-animation-shine-2" src="" mode="widthFix" observe-id="25" width="12" height="0" style="border-color: rgb(238, 238, 238);" />
|
||||
</view>
|
||||
</view>
|
||||
<view style="border-color: rgb(238, 238, 238);">
|
||||
<view class="card-item xhs_0_card-item item-close xhs_0_item-close sk-pseudo" data-index="1" style="border-color: rgb(238, 238, 238);">
|
||||
<image class="item-logo xhs_0_item-logo sk-animation-shine-2" src="" observe-id="26" width="24" height="24" style="border-color: rgb(238, 238, 238);" />
|
||||
<text class="item-desc xhs_0_item-desc sk-animation-shine-2 skeleton-text-block-mark" style="--text-display: inline; --text-selectable: none; border-color: rgb(238, 238, 238); position: relative; background-position-x: 0%;">
|
||||
表单组件
|
||||
</text>
|
||||
<image class="item-logo xhs_0_item-logo item-toggle xhs_0_item-toggle sk-animation-shine-2" src="" mode="widthFix" observe-id="27" width="12" height="0" style="border-color: rgb(238, 238, 238);" />
|
||||
</view>
|
||||
</view>
|
||||
<view style="border-color: rgb(238, 238, 238);">
|
||||
<view class="card-item xhs_0_card-item item-close xhs_0_item-close sk-pseudo" data-index="2" style="border-color: rgb(238, 238, 238);">
|
||||
<image class="item-logo xhs_0_item-logo sk-animation-shine-2" src="" observe-id="28" width="24" height="24" style="border-color: rgb(238, 238, 238);" />
|
||||
<text class="item-desc xhs_0_item-desc sk-animation-shine-2 skeleton-text-block-mark" style="--text-display: inline; --text-selectable: none; border-color: rgb(238, 238, 238); position: relative; background-position-x: 0%;">
|
||||
基础内容
|
||||
</text>
|
||||
<image class="item-logo xhs_0_item-logo item-toggle xhs_0_item-toggle sk-animation-shine-2" src="" mode="widthFix" observe-id="29" width="12" height="0" style="border-color: rgb(238, 238, 238);" />
|
||||
</view>
|
||||
</view>
|
||||
<view style="border-color: rgb(238, 238, 238);">
|
||||
<view class="card-item xhs_0_card-item item-close xhs_0_item-close sk-pseudo" data-index="3" style="border-color: rgb(238, 238, 238);">
|
||||
<image class="item-logo xhs_0_item-logo sk-animation-shine-2" src="" observe-id="30" width="24" height="24" style="border-color: rgb(238, 238, 238);" />
|
||||
<text class="item-desc xhs_0_item-desc sk-animation-shine-2 skeleton-text-block-mark" style="--text-display: inline; --text-selectable: none; border-color: rgb(238, 238, 238); position: relative; background-position-x: 0%;">
|
||||
媒体组件
|
||||
</text>
|
||||
<image class="item-logo xhs_0_item-logo item-toggle xhs_0_item-toggle sk-animation-shine-2" src="" mode="widthFix" observe-id="31" width="12" height="0" style="border-color: rgb(238, 238, 238);" />
|
||||
</view>
|
||||
</view>
|
||||
<view style="border-color: rgb(238, 238, 238);">
|
||||
<view class="card-item xhs_0_card-item item-close xhs_0_item-close sk-pseudo" data-index="4" style="border-color: rgb(238, 238, 238);">
|
||||
<image class="item-logo xhs_0_item-logo sk-animation-shine-2" src="" observe-id="32" width="24" height="24" style="border-color: rgb(238, 238, 238);" />
|
||||
<text class="item-desc xhs_0_item-desc sk-animation-shine-2 skeleton-text-block-mark" style="--text-display: inline; --text-selectable: none; border-color: rgb(238, 238, 238); position: relative; background-position-x: 0%;">
|
||||
地图组件
|
||||
</text>
|
||||
<image class="item-logo xhs_0_item-logo item-toggle xhs_0_item-toggle sk-animation-shine-2" src="" mode="widthFix" observe-id="33" width="12" height="0" style="border-color: rgb(238, 238, 238);" />
|
||||
</view>
|
||||
</view>
|
||||
<view style="border-color: rgb(238, 238, 238);">
|
||||
<view class="card-item xhs_0_card-item item-close xhs_0_item-close sk-pseudo" data-index="5" style="border-color: rgb(238, 238, 238);">
|
||||
<image class="item-logo xhs_0_item-logo sk-animation-shine-2" src="" observe-id="34" width="24" height="24" style="border-color: rgb(238, 238, 238);" />
|
||||
<text class="item-desc xhs_0_item-desc sk-animation-shine-2 skeleton-text-block-mark" style="--text-display: inline; --text-selectable: none; border-color: rgb(238, 238, 238); position: relative; background-position-x: 0%;">
|
||||
视图容器
|
||||
</text>
|
||||
<image class="item-logo xhs_0_item-logo item-toggle xhs_0_item-toggle sk-animation-shine-2" src="" mode="widthFix" observe-id="35" width="12" height="0" style="border-color: rgb(238, 238, 238);" />
|
||||
</view>
|
||||
</view>
|
||||
<view style="border-color: rgb(238, 238, 238);">
|
||||
<view class="card-item xhs_0_card-item item-close xhs_0_item-close sk-pseudo" data-index="6" style="border-color: rgb(238, 238, 238);">
|
||||
<image class="item-logo xhs_0_item-logo sk-animation-shine-2" src="" observe-id="36" width="24" height="24" style="border-color: rgb(238, 238, 238);" />
|
||||
<text class="item-desc xhs_0_item-desc sk-animation-shine-2 skeleton-text-block-mark" style="--text-display: inline; --text-selectable: none; border-color: rgb(238, 238, 238); position: relative; background-position-x: 0%;">
|
||||
导航组件
|
||||
</text>
|
||||
<image class="item-logo xhs_0_item-logo item-toggle xhs_0_item-toggle sk-animation-shine-2" src="" mode="widthFix" observe-id="37" width="12" height="0" style="border-color: rgb(238, 238, 238);" />
|
||||
</view>
|
||||
</view>
|
||||
<view style="border-color: rgb(238, 238, 238);">
|
||||
<view class="card-item xhs_0_card-item item-close xhs_0_item-close sk-pseudo" data-index="7" style="border-color: rgb(238, 238, 238);">
|
||||
<image class="item-logo xhs_0_item-logo sk-animation-shine-2" src="" observe-id="38" width="24" height="24" style="border-color: rgb(238, 238, 238);" />
|
||||
<text class="item-desc xhs_0_item-desc sk-animation-shine-2 skeleton-text-block-mark" style="--text-display: inline; --text-selectable: none; border-color: rgb(238, 238, 238); position: relative; background-position-x: 0%;">
|
||||
开放能力
|
||||
</text>
|
||||
<image class="item-logo xhs_0_item-logo item-toggle xhs_0_item-toggle sk-animation-shine-2" src="" mode="widthFix" observe-id="39" width="12" height="0" style="border-color: rgb(238, 238, 238);" />
|
||||
</view>
|
||||
</view>
|
||||
<view style="border-color: rgb(238, 238, 238);">
|
||||
<view class="card-item xhs_0_card-item item-close xhs_0_item-close card-item-last xhs_0_card-item-last sk-pseudo" data-index="8" style="border-color: rgb(238, 238, 238);">
|
||||
<image class="item-logo xhs_0_item-logo sk-animation-shine-2" src="" observe-id="40" width="24" height="24" style="border-color: rgb(238, 238, 238);" />
|
||||
<text class="item-desc xhs_0_item-desc sk-animation-shine-2 skeleton-text-block-mark" style="--text-display: inline; --text-selectable: none; border-color: rgb(238, 238, 238); position: relative; background-position-x: 0%;">
|
||||
自定义组件
|
||||
</text>
|
||||
<image class="item-logo xhs_0_item-logo item-toggle xhs_0_item-toggle sk-animation-shine-2" src="" mode="widthFix" observe-id="41" width="12" height="0" style="border-color: rgb(238, 238, 238);" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
39
xhs-mini-demos/entry/component/component.xhsml
Normal file
39
xhs-mini-demos/entry/component/component.xhsml
Normal file
@@ -0,0 +1,39 @@
|
||||
<view class="page">
|
||||
<view class="head-bg" data-skeleton-bgcolor="#f60">
|
||||
<view class="head-bg-logo">
|
||||
<image style="width: 154px;" src="../../image/logo.png" mode="widthFix"/>
|
||||
<view>官方演示小程序</view>
|
||||
</view>
|
||||
<view class="search">
|
||||
<view class="search-box" bindtap="openSearch">
|
||||
<view class="search-icon">
|
||||
<image src="../../image/search_1.5.png"></image>
|
||||
</view>
|
||||
<text>搜索组件、能力或指南</text>
|
||||
</view>
|
||||
</view>
|
||||
<image class="head-bg-img" src="../../image/Union.png" mode="widthFix"/>
|
||||
</view>
|
||||
|
||||
<view class="card-container">
|
||||
<view class="card-content">
|
||||
<view xhs:for-items="{{items}}" xhs:for-item="item" xhs:key="*item">
|
||||
<view class="card-item {{item.open ? '' : 'item-close'}} {{index+1 === items.length && !item.open ? 'card-item-last' : ''}}" bindtap="toggleClick" data-index="{{index}}" data-id="{{item.id}}">
|
||||
<image class="item-logo" src="{{item.icon}}"></image>
|
||||
<text class="item-desc">{{item.name}}</text>
|
||||
<image xhs:if="{{item.id}}" class="item-logo item-toggle" src="https://b.bdstatic.com/searchbox/icms/searchbox/img/right_arrow.png"></image>
|
||||
<image xhs:else class="item-logo item-toggle" src="{{item.open ? '../../image/top.png' : '../../image/bottom.png'}}" mode="widthFix"></image>
|
||||
</view>
|
||||
<view xhs:if="{{item.open}}" class="card-item-extend">
|
||||
<view hover-class="hover" xhs:for-items="{{item.list}}" xhs:for-item="subItem" bindtap="oneItemClick" data-id="{{subItem.id}}" data-show="{{subItem.show}}">
|
||||
<view class="sub-item">
|
||||
<text class="sub-item-desc">{{subItem.subName}}</text>
|
||||
<!-- <text class="sub-item-desc-tra">{{subItem.subNameTra}}</text> -->
|
||||
<image class="item-logo item-toggle-extend" src="../../image/right.png" mode="heightFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
493
xhs-mini-demos/entry/guide/guide.css
Normal file
493
xhs-mini-demos/entry/guide/guide.css
Normal file
@@ -0,0 +1,493 @@
|
||||
html,
|
||||
body {
|
||||
font-size: 100px;
|
||||
}
|
||||
|
||||
.guide-container {
|
||||
display: flex;
|
||||
padding-top: 188px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* 组件主体 */
|
||||
.wrap {
|
||||
padding-bottom: .5rem;
|
||||
font-size: .16rem;
|
||||
}
|
||||
|
||||
/* API主体 */
|
||||
.container {
|
||||
font-size: .16rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
/* radio样式 */
|
||||
.radio {
|
||||
display: block;
|
||||
margin: 0 .17rem;
|
||||
padding: .17rem 0;
|
||||
background-color: #FFF;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: block;
|
||||
margin: 0 .17rem;
|
||||
padding: .17rem 0;
|
||||
background-color: #FFF;
|
||||
}
|
||||
|
||||
.item-scroll {
|
||||
display: flex;
|
||||
margin: 0 .17rem;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* 卡片区域 */
|
||||
.card-area {
|
||||
overflow: hidden;
|
||||
margin: .17rem .17rem 0 .17rem;
|
||||
border-radius: 6px;
|
||||
background: #FFF;
|
||||
}
|
||||
|
||||
/* 展示区 */
|
||||
.display-area {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 2.18rem;
|
||||
text-align: center;
|
||||
border-radius: 8px 8px;
|
||||
background: #FFF;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.display-area-image {
|
||||
width: 100%;
|
||||
height: 2.2rem;
|
||||
text-align: center;
|
||||
border-radius: 8px 8px 0 0;
|
||||
}
|
||||
|
||||
/* 描述文字 */
|
||||
.description {
|
||||
height: .46rem;
|
||||
padding-left: .17rem;
|
||||
line-height: .46rem;
|
||||
}
|
||||
|
||||
.top-description {
|
||||
display: flex;
|
||||
padding: .16rem .17rem;
|
||||
font-family: PingFangSC-Medium;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.top-description :first-child {
|
||||
width: 2.93rem;
|
||||
font-size: .15rem;
|
||||
}
|
||||
|
||||
.top-description :nth-child(2) {
|
||||
width: 2.45rem;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: .13rem;
|
||||
text-align: right;
|
||||
color: #999;
|
||||
}
|
||||
/* 模式标题 */
|
||||
.mode-title {
|
||||
display: flex;
|
||||
font-family: PingFangSC-Medium;
|
||||
font-size: .16rem;
|
||||
color: #000;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.mode-title-first {
|
||||
margin-top: .2rem;
|
||||
}
|
||||
|
||||
.mode-title-text {
|
||||
margin: 0 .12rem;
|
||||
}
|
||||
|
||||
.mode-title-line-left {
|
||||
width: .23rem;
|
||||
height: 1px;
|
||||
border-radius: 3px;
|
||||
background-image: linear-gradient(90deg, #F5F5F5 0%, #D5D5D5 100%);
|
||||
}
|
||||
|
||||
.mode-title-line-right {
|
||||
width: .23rem;
|
||||
height: 1px;
|
||||
border-radius: 3px;
|
||||
background-image: linear-gradient(-90deg, #F5F5F5 0%, #D5D5D5 100%);
|
||||
}
|
||||
|
||||
/* 结果文字 */
|
||||
.result-area {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 1.3rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.result-area-fail {
|
||||
width: 2.4rem;
|
||||
margin: 0 auto;
|
||||
font-size: .24rem;
|
||||
text-align: center;
|
||||
color: #F7534F;
|
||||
}
|
||||
|
||||
.result-area-default {
|
||||
width: 2.4rem;
|
||||
margin: 0 auto;
|
||||
font-size: .24rem;
|
||||
text-align: center;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.result-area-succ {
|
||||
width: 2.4rem;
|
||||
margin: 0 auto;
|
||||
font-size: .24rem;
|
||||
text-align: center;
|
||||
color: #38F;
|
||||
}
|
||||
|
||||
.result-area-tips {
|
||||
margin-top: .08rem;
|
||||
font-size: .14rem;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 按纽区 */
|
||||
.button-group {
|
||||
margin: .3rem 0 .2rem 0;
|
||||
}
|
||||
|
||||
swan-button {
|
||||
margin: .2rem .23rem;
|
||||
font-size: .18rem;
|
||||
line-height: .44rem;
|
||||
}
|
||||
|
||||
.flex-button {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: #FFF;
|
||||
}
|
||||
|
||||
/* 一个列表项，和border一起使用 */
|
||||
.list-area {
|
||||
margin: 0 .17rem;
|
||||
padding: .14rem 0;
|
||||
font-family: PingFangSC-Regular;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.list-item-key-4 {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.list-item-key-6 {
|
||||
display: inline-block;
|
||||
width: 1.2rem;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.list-item-value {
|
||||
display: inline-block;
|
||||
width: 2.2rem;
|
||||
vertical-align: middle;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.option-active {
|
||||
background: #F2F2F2;
|
||||
}
|
||||
|
||||
/* 提示 */
|
||||
.tip-week {
|
||||
margin: 0 .14rem .18rem;
|
||||
font-size: .12rem;
|
||||
line-height: .2rem;
|
||||
text-align: center;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.tip-strong {
|
||||
padding: .11rem .23rem;
|
||||
font-size: .1rem;
|
||||
/* height: .57rem; */
|
||||
text-align: center;
|
||||
color: #EE823A;
|
||||
border-radius: 8px 8px 0 0 ;
|
||||
background-color: #FFF9E3;
|
||||
}
|
||||
|
||||
/* ai 列表样式 */
|
||||
.result-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.result-item:not(:last-of-type) {
|
||||
margin-bottom: .24rem;
|
||||
}
|
||||
|
||||
.result-item-key-4 {
|
||||
width: .66rem;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.result-item-key-6 {
|
||||
width: .9rem;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.result-item-value {
|
||||
width: 2.5rem;
|
||||
margin-left: .19rem;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.result-item-value-err {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 底部标识title */
|
||||
.page-title {
|
||||
margin: 1rem 0 .3rem 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.page-title-line {
|
||||
width: .83rem;
|
||||
height: .02rem;
|
||||
margin: 0 auto;
|
||||
background-color: #E6E6E6;
|
||||
}
|
||||
|
||||
.page-title-text {
|
||||
margin-top: .07rem;
|
||||
color: #CCC;
|
||||
}
|
||||
|
||||
.page-top {
|
||||
margin-top: .36rem;
|
||||
text-align: center;
|
||||
}
|
||||
.page-top-line {
|
||||
position: relative;
|
||||
width: .54rem;
|
||||
height: .01rem;
|
||||
margin: 0 auto;
|
||||
border: 0;
|
||||
background-color: #979797;
|
||||
}
|
||||
.page-top-text {
|
||||
margin-bottom: .1rem;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 上下左右边框 */
|
||||
.border-top {
|
||||
position: relative;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.border-top:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: #E6E6E6;
|
||||
-webkit-transform-origin: 0 0;
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
|
||||
.border-right {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.border-right:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 1px;
|
||||
background: #E6E6E6;
|
||||
-webkit-transform-origin: 100% 0;
|
||||
transform-origin: 100% 0;
|
||||
}
|
||||
|
||||
.border-bottom {
|
||||
position: relative;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.border-bottom:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: #E6E6E6;
|
||||
-webkit-transform-origin: 0 100%;
|
||||
transform-origin: 0 100%;
|
||||
}
|
||||
|
||||
.border-left {
|
||||
position: relative;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.border-left:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
background: #E6E6E6;
|
||||
-webkit-transform-origin: left center;
|
||||
transform-origin: left center;
|
||||
}
|
||||
|
||||
.border-all {
|
||||
position: relative;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.border-all:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #E6E6E6;
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
border-radius: 0;
|
||||
background: 0 0;
|
||||
-webkit-transform-origin: 0 0;
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
|
||||
/* 组件样式 */
|
||||
.title {
|
||||
padding: .3rem .22rem .18rem .22rem;
|
||||
font-size: .15rem;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
|
||||
|
||||
swan-button[type="primary"] {
|
||||
background: #38F;
|
||||
}
|
||||
|
||||
/* 适配各种屏幕 */
|
||||
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
|
||||
not all {
|
||||
.border-top:before,
|
||||
.border-bottom:after {
|
||||
-webkit-transform: scaleY(.66666667);
|
||||
transform: scaleY(.66666667);
|
||||
}
|
||||
|
||||
.border-right:after,
|
||||
.border-left:before {
|
||||
-webkit-transform: scaleX(.66666667);
|
||||
transform: scaleX(.66666667);
|
||||
}
|
||||
|
||||
.border-all:before {
|
||||
width: 150%;
|
||||
height: 150%;
|
||||
-webkit-transform: scale(.66666667);
|
||||
transform: scale(.66666667);
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (-webkit-min-device-pixel-ratio: 2),
|
||||
not all {
|
||||
.border-top:before,
|
||||
.border-bottom:after {
|
||||
-webkit-transform: scaleY(.5);
|
||||
transform: scaleY(.5);
|
||||
}
|
||||
|
||||
.border-right:after,
|
||||
.border-left:before {
|
||||
-webkit-transform: scaleX(.5);
|
||||
transform: scaleX(.5);
|
||||
}
|
||||
|
||||
.border-all:before {
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
-webkit-transform: scale(.48);
|
||||
transform: scale(.48);
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (-webkit-min-device-pixel-ratio: 3),
|
||||
not all {
|
||||
.border-top:before,
|
||||
.border-bottom:after {
|
||||
-webkit-transform: scaleY(.33333333);
|
||||
transform: scaleY(.33333333);
|
||||
}
|
||||
|
||||
.border-right:after,
|
||||
.border-left:before {
|
||||
-webkit-transform: scaleX(.33333333);
|
||||
transform: scaleX(.33333333);
|
||||
}
|
||||
|
||||
.border-all:before {
|
||||
width: 300%;
|
||||
height: 300%;
|
||||
-webkit-transform: scale(.3326);
|
||||
transform: scale(.3326);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 320px) {
|
||||
html {
|
||||
font-size: 77.2946px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 375px) {
|
||||
html {
|
||||
font-size: 90.5797px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 414px) {
|
||||
html {
|
||||
font-size: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
4
xhs-mini-demos/entry/guide/guide.js
Normal file
4
xhs-mini-demos/entry/guide/guide.js
Normal file
@@ -0,0 +1,4 @@
|
||||
|
||||
Page({
|
||||
|
||||
});
|
||||
6
xhs-mini-demos/entry/guide/guide.json
Normal file
6
xhs-mini-demos/entry/guide/guide.json
Normal file
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"navigationBarTitleText": "运营指南",
|
||||
"backgroundColor": "#EFF1F2",
|
||||
"navigationStyle": "custom",
|
||||
"usingComponents": {}
|
||||
}
|
||||
3
xhs-mini-demos/entry/guide/guide.xhsml
Normal file
3
xhs-mini-demos/entry/guide/guide.xhsml
Normal file
@@ -0,0 +1,3 @@
|
||||
<view class="guide-container">
|
||||
<image style="width: 96px" src="../../image/jsz.png" mode="widthFix"></image>
|
||||
</view>
|
||||
929
xhs-mini-demos/entry/search/dictionary.js
Normal file
929
xhs-mini-demos/entry/search/dictionary.js
Normal file
@@ -0,0 +1,929 @@
|
||||
/**
|
||||
* @file dictionary
|
||||
* @author sunbai
|
||||
*/
|
||||
|
||||
export const componentDictionary = [
|
||||
{
|
||||
subName: '按钮',
|
||||
subNameTra: 'button',
|
||||
id: 'button'
|
||||
},
|
||||
{
|
||||
subName: '多项选择器',
|
||||
subNameTra: 'checkbox',
|
||||
id: 'checkbox'
|
||||
},
|
||||
{
|
||||
subName: '表单',
|
||||
subNameTra: 'form',
|
||||
id: 'form'
|
||||
},
|
||||
{
|
||||
subName: '输入框',
|
||||
subNameTra: 'input',
|
||||
id: 'input'
|
||||
},
|
||||
{
|
||||
subName: '表单组件标签',
|
||||
subNameTra: 'label',
|
||||
id: 'label'
|
||||
},
|
||||
{
|
||||
subName: '底部弹起的滚动选择器',
|
||||
subNameTra: 'picker',
|
||||
id: 'picker'
|
||||
},
|
||||
{
|
||||
subName: '滚动选择器',
|
||||
subNameTra: 'picker-view',
|
||||
id: 'picker-view'
|
||||
},
|
||||
{
|
||||
subName: '单项选择器',
|
||||
subNameTra: 'radio',
|
||||
id: 'radio'
|
||||
},
|
||||
{
|
||||
subName: '滑动选择器',
|
||||
subNameTra: 'slider',
|
||||
id: 'slider'
|
||||
},
|
||||
{
|
||||
subName: '开关选择器',
|
||||
subNameTra: 'switch',
|
||||
id: 'switch'
|
||||
},
|
||||
{
|
||||
subName: '多行输入框',
|
||||
subNameTra: 'textarea',
|
||||
id: 'textarea'
|
||||
},
|
||||
{
|
||||
subName: '富文本编辑器',
|
||||
id: 'editor',
|
||||
subNameTra: 'editor'
|
||||
},
|
||||
{
|
||||
subName: '图标',
|
||||
subNameTra: 'icon',
|
||||
id: 'icon'
|
||||
},
|
||||
{
|
||||
subName: '进度条',
|
||||
subNameTra: 'progress',
|
||||
id: 'progress'
|
||||
},
|
||||
{
|
||||
subName: '富文本',
|
||||
subNameTra: 'rich-text',
|
||||
id: 'rich-text'
|
||||
},
|
||||
{
|
||||
subName: '文本',
|
||||
subNameTra: 'text',
|
||||
id: 'text'
|
||||
},
|
||||
// {
|
||||
// subName: '透明视频动画',
|
||||
// subNameTra: 'animation-video',
|
||||
// id: 'animation-video'
|
||||
// },
|
||||
// {
|
||||
// subName: 'Lottie 动画',
|
||||
// subNameTra: 'animation-view',
|
||||
// id: 'animation-view'
|
||||
// },
|
||||
// {
|
||||
// subName: '音频',
|
||||
// subNameTra: 'audio',
|
||||
// id: 'audio'
|
||||
// },
|
||||
// {
|
||||
// subName: '相机',
|
||||
// subNameTra: 'camera',
|
||||
// id: 'camera'
|
||||
// },
|
||||
// {
|
||||
// subName: 'AR相机',
|
||||
// subNameTra: 'ar-camera',
|
||||
// id: 'ar-camera'
|
||||
// },
|
||||
{
|
||||
subName: '图片',
|
||||
subNameTra: 'image',
|
||||
id: 'image'
|
||||
},
|
||||
// {
|
||||
// subName: '实时视频播放器',
|
||||
// subNameTra: 'live-player',
|
||||
// id: 'live-player'
|
||||
// },
|
||||
{
|
||||
subName: '视频',
|
||||
subNameTra: 'video',
|
||||
id: 'video'
|
||||
},
|
||||
// {
|
||||
// subName: '实时音视频通话',
|
||||
// subNameTra: 'rtc',
|
||||
// id: 'rtc'
|
||||
// }
|
||||
{
|
||||
subName: '地图',
|
||||
subNameTra: 'map',
|
||||
id: 'map'
|
||||
},
|
||||
{
|
||||
subName: '可移动视图容器',
|
||||
subNameTra: 'movable-area',
|
||||
id: 'movable-area'
|
||||
},
|
||||
{
|
||||
subName: '可滚动视图区域',
|
||||
subNameTra: 'scroll-view',
|
||||
id: 'scroll-view'
|
||||
},
|
||||
{
|
||||
subName: '滑块视图容器',
|
||||
subNameTra: 'swiper',
|
||||
id: 'swiper'
|
||||
},
|
||||
{
|
||||
subName: '基础视图',
|
||||
subNameTra: 'view',
|
||||
id: 'view'
|
||||
},
|
||||
{
|
||||
subName: '页面导航',
|
||||
subNameTra: 'navigator',
|
||||
id: 'navigator'
|
||||
},
|
||||
// {
|
||||
// subName: '标签栏',
|
||||
// subNameTra: 'tabs',
|
||||
// id: 'tabs'
|
||||
// },
|
||||
// {
|
||||
// subName: '广告',
|
||||
// subNameTra: 'ad',
|
||||
// id: 'ad'
|
||||
// },
|
||||
// {
|
||||
// subName: '开放数据',
|
||||
// subNameTra: 'open-data',
|
||||
// id: 'open-data'
|
||||
// },
|
||||
{
|
||||
subName: '网页容器',
|
||||
subNameTra: 'webview',
|
||||
id: 'webview'
|
||||
},
|
||||
// {
|
||||
// subName: '内嵌登录',
|
||||
// subNameTra: 'login',
|
||||
// id: 'login'
|
||||
// },
|
||||
// {
|
||||
// subName: '内嵌支付面板',
|
||||
// subNameTra: 'inline-payment-panel',
|
||||
// id: 'inline-payment-panel'
|
||||
// },
|
||||
|
||||
// {
|
||||
// icon: 'https://b.bdstatic.com/searchbox/icms/searchbox/img/canvas.png',
|
||||
// name: '画布',
|
||||
// open: false,
|
||||
// list: [
|
||||
// {
|
||||
// subName: '画布',
|
||||
// subNameTra: 'canvas',
|
||||
// id: 'canvas'
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
|
||||
// {
|
||||
// icon: 'https://b.bdstatic.com/searchbox/icms/searchbox/img/content-services.png',
|
||||
// name: '内容服务',
|
||||
// open: false,
|
||||
// list: [
|
||||
// {
|
||||
// subName: '点赞',
|
||||
// id: 'like',
|
||||
// subNameTra: 'like'
|
||||
// },
|
||||
// {
|
||||
// subName: '关注小程序',
|
||||
// subNameTra: 'follow-xhs',
|
||||
// id: 'follow-xhs'
|
||||
// },
|
||||
// {
|
||||
// subName: '一站式互动',
|
||||
// id: 'one-stop-interaction',
|
||||
// subNameTra: 'one-stop-interaction'
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
|
||||
// {
|
||||
// icon: 'https://b.bdstatic.com/searchbox/icms/searchbox/img/dynamicLib.png',
|
||||
// name: '动态库',
|
||||
// open: false,
|
||||
// list: [
|
||||
// {
|
||||
// subName: '富文本编辑器',
|
||||
// id: 'editor',
|
||||
// subNameTra: 'editor'
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
];
|
||||
|
||||
export const apiDictionary = [
|
||||
{
|
||||
subName: '检测api能力',
|
||||
id: 'caniuse'
|
||||
},
|
||||
// {
|
||||
// subName: 'arrayBuffer <=> base64',
|
||||
// id: 'base64arraybuffer'
|
||||
// },
|
||||
{
|
||||
subName: '获取设备系统信息',
|
||||
id: 'get-system-info'
|
||||
},
|
||||
// {
|
||||
// subName: '小程序生命周期',
|
||||
// id: 'getLaunchOptionsSync'
|
||||
// },
|
||||
{
|
||||
subName: '检测小程序更新',
|
||||
id: 'mp-update'
|
||||
},
|
||||
{
|
||||
subName: '页面跳转',
|
||||
id: 'navigator'
|
||||
},
|
||||
// todo
|
||||
// {
|
||||
// icon: 'https://b.bdstatic.com/searchbox/icms/searchbox/img/router.png',
|
||||
// name: '跳转',
|
||||
// open: false,
|
||||
// list: [
|
||||
|
||||
// ]
|
||||
// },
|
||||
|
||||
// {
|
||||
// icon: '../../image/基础.png',
|
||||
// name: '转发',
|
||||
// open: false,
|
||||
// list: [
|
||||
// {
|
||||
// subName: '分享',
|
||||
// id: 'share'
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
{
|
||||
subName: '显示加载提示框',
|
||||
id: 'loading'
|
||||
},
|
||||
{
|
||||
subName: '显示消息提示框',
|
||||
id: 'toast'
|
||||
},
|
||||
{
|
||||
subName: '操作菜单',
|
||||
id: 'action-sheet'
|
||||
},
|
||||
{
|
||||
subName: '显示模态弹窗',
|
||||
id: 'modal'
|
||||
},
|
||||
{
|
||||
subName: '设置tabBar状态',
|
||||
id: 'set-tab-bar-item'
|
||||
},
|
||||
{
|
||||
subName: '设置tabBar样式',
|
||||
id: 'set-tab-bar-style'
|
||||
},
|
||||
{
|
||||
subName: '设置导航栏颜色',
|
||||
id: 'set-navigation-bar-color'
|
||||
},
|
||||
{
|
||||
subName: '设置导航栏标题',
|
||||
id: 'set-navigation-bar-title'
|
||||
},
|
||||
// {
|
||||
// subName: '隐藏返回首页按钮',
|
||||
// id: 'hide-home-button'
|
||||
// },
|
||||
{
|
||||
subName: '下拉刷新',
|
||||
id: 'pull-down-refresh'
|
||||
},
|
||||
{
|
||||
subName: '创建动画',
|
||||
id: 'animation'
|
||||
},
|
||||
{
|
||||
subName: '获取菜单按钮布局信息',
|
||||
id: 'menu-button'
|
||||
},
|
||||
|
||||
|
||||
|
||||
// {
|
||||
// subName: '导航栏加载动画',
|
||||
// id: 'navigation-bar-loading'
|
||||
// },
|
||||
// {
|
||||
// subName: '设置底部标签栏',
|
||||
// id: 'tab-bar'
|
||||
// },
|
||||
// {
|
||||
// subName: '关注小程序引导',
|
||||
// id: 'show-favorite-guide'
|
||||
// },
|
||||
// {
|
||||
// subName: '页面滚动',
|
||||
// id: 'page-scroll-to'
|
||||
// },
|
||||
// {
|
||||
// subName: '设置背景颜色',
|
||||
// id: 'set-background-color'
|
||||
// },
|
||||
// {
|
||||
// subName: '获取节点信息',
|
||||
// id: 'create-selector-query'
|
||||
// },
|
||||
// {
|
||||
// subName: '用户可见节点',
|
||||
// id: 'intersection-observer'
|
||||
// },
|
||||
// {
|
||||
// subName: '改变屏幕方向',
|
||||
// id: 'change-screen-orientation'
|
||||
// },
|
||||
// {
|
||||
// subName: '锁定屏幕方向',
|
||||
// id: 'lock-screen-orientation'
|
||||
// },
|
||||
// {
|
||||
// subName: '解锁屏幕方向',
|
||||
// id: 'unlock-screen-orientation'
|
||||
// }
|
||||
{
|
||||
subName: '发起请求',
|
||||
id: 'request'
|
||||
},
|
||||
{
|
||||
subName: '上传文件',
|
||||
id: 'upload-file'
|
||||
},
|
||||
{
|
||||
subName: '下载文件',
|
||||
id: 'download-file'
|
||||
},
|
||||
// {
|
||||
// subName: 'webSocket',
|
||||
// id: 'web-socket'
|
||||
// },
|
||||
// {
|
||||
// icon: '../../image/基础.png',
|
||||
// name: '支付',
|
||||
// open: false,
|
||||
// list: [
|
||||
// {
|
||||
// subName: '支付',
|
||||
// id: 'request-payment'
|
||||
// },
|
||||
// ]
|
||||
// },
|
||||
|
||||
{
|
||||
subName: '数据存储',
|
||||
id: 'storage'
|
||||
},
|
||||
// {
|
||||
// subName: '预览图片',
|
||||
// id: 'preview-image'
|
||||
// },
|
||||
// {
|
||||
// subName: '获取图片信息',
|
||||
// id: 'get-image-info'
|
||||
// },
|
||||
// {
|
||||
// subName: '保存图片到相册',
|
||||
// id: 'save-image-to-photos-album'
|
||||
// },
|
||||
// {
|
||||
// subName: '选择图片',
|
||||
// id: 'choose-image'
|
||||
// },
|
||||
|
||||
{
|
||||
subName: '图片',
|
||||
id: 'image'
|
||||
},
|
||||
// 和组件重复
|
||||
// {
|
||||
// subName: '地图',
|
||||
// id: 'map'
|
||||
// },
|
||||
{
|
||||
subName: '视频',
|
||||
id: 'video'
|
||||
},
|
||||
// 和组件重复
|
||||
// {
|
||||
// subName: '富文本',
|
||||
// id: 'editor'
|
||||
// },
|
||||
|
||||
|
||||
// {
|
||||
// subName: '选择图片和视频',
|
||||
// id: 'choose-album'
|
||||
// },
|
||||
// {
|
||||
// subName: '背景音频',
|
||||
// id: 'get-background-audio-manager'
|
||||
// },
|
||||
// {
|
||||
// subName: '录音',
|
||||
// id: 'get-recorder-manager'
|
||||
// },
|
||||
// {
|
||||
// subName: '获取音频输入源',
|
||||
// id: 'get-available-audio-sources'
|
||||
// },
|
||||
// {
|
||||
// subName: '选择视频',
|
||||
// id: 'choose-video'
|
||||
// },
|
||||
// {
|
||||
// subName: '保存视频到相册',
|
||||
// id: 'save-video-to-photos-album'
|
||||
// }
|
||||
{
|
||||
subName: '获取位置',
|
||||
id: 'get-location'
|
||||
},
|
||||
{
|
||||
subName: '地图控制',
|
||||
id: 'map'
|
||||
},
|
||||
// {
|
||||
// subName: '使用原生地图查看位置',
|
||||
// id: 'open-location'
|
||||
// },
|
||||
// {
|
||||
// subName: '使用原生地图选择位置',
|
||||
// id: 'choose-location'
|
||||
// },
|
||||
{
|
||||
subName: '登录',
|
||||
id: 'login'
|
||||
},
|
||||
{
|
||||
subName: '检验登陆态',
|
||||
id: 'check-session'
|
||||
},
|
||||
// todo
|
||||
// {
|
||||
// subName: '授权(todo)',
|
||||
// id: 'authorize'
|
||||
// },
|
||||
{
|
||||
subName: '支付',
|
||||
id: 'request-payment'
|
||||
},
|
||||
{
|
||||
subName: '授权设置',
|
||||
id: 'setting'
|
||||
},
|
||||
{
|
||||
subName: '选择收货地址',
|
||||
id: 'choose-address'
|
||||
},
|
||||
{
|
||||
subName: ' 获取用户信息',
|
||||
id: 'get-user-info'
|
||||
},
|
||||
{
|
||||
subName: ' 获取账号信息',
|
||||
id: 'get-account-info-sync'
|
||||
},
|
||||
// todo
|
||||
// {
|
||||
// subName: '引导关注(todo)',
|
||||
// id: 'yindao'
|
||||
// },
|
||||
// todo
|
||||
// {
|
||||
// subName: '专业号(todo)',
|
||||
// id: 'zhuanyehao'
|
||||
// },
|
||||
|
||||
// {
|
||||
// subName: '书架',
|
||||
// id: 'book-shelf'
|
||||
// },
|
||||
{
|
||||
subName: '剪贴板',
|
||||
id: 'clipboard-data'
|
||||
},
|
||||
{
|
||||
subName: '获取手机网络类型',
|
||||
id: 'get-network-type'
|
||||
},
|
||||
{
|
||||
subName: '拨打电话',
|
||||
id: 'make-phone-call'
|
||||
},
|
||||
{
|
||||
subName: '监听手机内存状态',
|
||||
id: 'memory-warn'
|
||||
},
|
||||
{
|
||||
subName: '扫码',
|
||||
id: 'scan-code'
|
||||
},
|
||||
|
||||
|
||||
|
||||
// {
|
||||
// subName: '获取运行环境信息',
|
||||
// id: 'get-env-info-sync'
|
||||
// },
|
||||
// {
|
||||
// subName: '监听网络状态变化',
|
||||
// id: 'on-network-status-change'
|
||||
// },
|
||||
// {
|
||||
// subName: '屏幕亮度',
|
||||
// id: 'screen-brightness'
|
||||
// },
|
||||
// {
|
||||
// subName: '振动',
|
||||
// id: 'vibrate'
|
||||
// },
|
||||
// {
|
||||
// subName: '监听加速度数据',
|
||||
// id: 'get-accelerometer'
|
||||
// },
|
||||
// {
|
||||
// subName: '监听罗盘数据',
|
||||
// id: 'get-compass'
|
||||
// },
|
||||
// {
|
||||
// subName: '监听设备方向变化',
|
||||
// id: 'device-motion'
|
||||
// },
|
||||
// {
|
||||
// subName: '添加手机联系人',
|
||||
// id: 'add-phone-contact'
|
||||
// },
|
||||
// {
|
||||
// subName: '获取电量信息',
|
||||
// id: 'get-battery-info'
|
||||
// },
|
||||
// {
|
||||
// subName: '监听用户截屏事件',
|
||||
// id: 'on-user-capture-screen'
|
||||
// },
|
||||
// {
|
||||
// subName: '在系统日历中新建日程',
|
||||
// id: 'event-on-calendar'
|
||||
// },
|
||||
// {
|
||||
// subName: '监听键盘高度变化',
|
||||
// id: 'keyboard-heightchange'
|
||||
// },
|
||||
// {
|
||||
// subName: '监听手机屏幕朗读器开启状态变化',
|
||||
// id: 'screen-reader-change'
|
||||
// },
|
||||
// {
|
||||
// subName: '监听手机动画减弱开启状态变化',
|
||||
// id: 'reduce-motion-change'
|
||||
// },
|
||||
// {
|
||||
// subName: '获取手机动画减弱开启状态',
|
||||
// id: 'is-reduce-motion-enabled'
|
||||
// },
|
||||
// {
|
||||
// subName: '获取手机屏幕朗读器开启状态',
|
||||
// id: 'is-screen-reader-enabled'
|
||||
// }
|
||||
// todo
|
||||
// {
|
||||
// icon: 'https://b.bdstatic.com/searchbox/icms/searchbox/img/router.png',
|
||||
// name: 'XHSML',
|
||||
// open: false,
|
||||
// list: [
|
||||
|
||||
// ]
|
||||
// },
|
||||
|
||||
// todo
|
||||
// {
|
||||
// icon: 'https://b.bdstatic.com/searchbox/icms/searchbox/img/router.png',
|
||||
// name: '性能',
|
||||
// open: false,
|
||||
// list: [
|
||||
|
||||
// ]
|
||||
// },
|
||||
{
|
||||
subName: '获取第三方数据',
|
||||
id: 'ext-config'
|
||||
}
|
||||
// {
|
||||
// icon: '../../image/基础.png',
|
||||
// name: '文件',
|
||||
// open: false,
|
||||
// list: [
|
||||
// {
|
||||
// subName: '文件',
|
||||
// id: 'file'
|
||||
// },
|
||||
// // {
|
||||
// // subName: '文件管理系统',
|
||||
// // id: 'file-system'
|
||||
// // }
|
||||
// ]
|
||||
// },
|
||||
|
||||
// todo
|
||||
// {
|
||||
// icon: 'https://b.bdstatic.com/searchbox/icms/searchbox/img/router.png',
|
||||
// name: '数据分析',
|
||||
// open: false,
|
||||
// list: [
|
||||
|
||||
// ]
|
||||
// },
|
||||
|
||||
// {
|
||||
// icon: 'https://b.bdstatic.com/searchbox/icms/searchbox/img/ai1.png',
|
||||
// name: 'AI',
|
||||
// open: false,
|
||||
// list: [
|
||||
// {
|
||||
// subName: '银行卡识别',
|
||||
// id: 'ocr-bank-card'
|
||||
// },
|
||||
// {
|
||||
// subName: '驾驶证识别',
|
||||
// id: 'ocr-driving-license'
|
||||
// },
|
||||
// {
|
||||
// subName: '行驶证识别',
|
||||
// id: 'ocr-vehicle-license'
|
||||
// },
|
||||
// {
|
||||
// subName: '文本审核',
|
||||
// id: 'text-review'
|
||||
// },
|
||||
// {
|
||||
// subName: '通用场景识别',
|
||||
// id: 'advanced-general-identify'
|
||||
// },
|
||||
// {
|
||||
// subName: '动物识别',
|
||||
// id: 'animal-classify'
|
||||
// },
|
||||
// {
|
||||
// subName: '车型识别',
|
||||
// id: 'car-classify'
|
||||
// },
|
||||
// {
|
||||
// subName: '菜品识别',
|
||||
// id: 'dish-classify'
|
||||
// },
|
||||
// {
|
||||
// subName: '品牌识别',
|
||||
// id: 'logo-classify'
|
||||
// },
|
||||
// {
|
||||
// subName: '植物识别',
|
||||
// id: 'plant-classify'
|
||||
// },
|
||||
// {
|
||||
// subName: '图像审核',
|
||||
// id: 'image-audit'
|
||||
// },
|
||||
// {
|
||||
// subName: '语音识别',
|
||||
// id: 'get-voice-manager'
|
||||
// },
|
||||
// {
|
||||
// subName: '人脸检测',
|
||||
// id: 'face-detect'
|
||||
// },
|
||||
// {
|
||||
// subName: '人脸对比',
|
||||
// id: 'face-match'
|
||||
// },
|
||||
// {
|
||||
// subName: '人脸公安验证',
|
||||
// id: 'face-person-verify'
|
||||
// },
|
||||
// {
|
||||
// subName: '身份信息验证',
|
||||
// id: 'face-person-idmatch'
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
|
||||
// {
|
||||
// icon: 'https://b.bdstatic.com/searchbox/icms/searchbox/img/canvas.png',
|
||||
// name: '画布',
|
||||
// open: false,
|
||||
// list: [
|
||||
// {
|
||||
// subName: '创建绘图',
|
||||
// id: 'create-canvas-context'
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
|
||||
// {
|
||||
// icon: 'https://b.bdstatic.com/searchbox/icms/searchbox/img/user-interface.png',
|
||||
// name: '用户接口',
|
||||
// open: false,
|
||||
// list: [
|
||||
// {
|
||||
// subName: '获取用户设备标识',
|
||||
// id: 'get-xhs-id'
|
||||
// },
|
||||
// {
|
||||
// subName: '自定义页面分享信息',
|
||||
// id: 'on-share-app-message'
|
||||
// },
|
||||
// {
|
||||
// subName: '打开分享面板',
|
||||
// id: 'open-share'
|
||||
// },
|
||||
// {
|
||||
// subName: '分享文件',
|
||||
// id: 'share-file'
|
||||
// },
|
||||
// {
|
||||
// subName: '获取发票抬头',
|
||||
// id: 'choose-invoice-title'
|
||||
// },
|
||||
// {
|
||||
// subName: '原生全屏内容发布器',
|
||||
// id: 'community-editor'
|
||||
// },
|
||||
// {
|
||||
// subName: '原生半屏内容发布器',
|
||||
// id: 'open-reply-editor'
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
|
||||
// {
|
||||
// icon: 'https://b.bdstatic.com/searchbox/icms/searchbox/img/server.png',
|
||||
// name: '服务端',
|
||||
// open: false,
|
||||
// list: [
|
||||
// {
|
||||
// subName: '模板消息',
|
||||
// id: 'template-message'
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
|
||||
// {
|
||||
// icon: 'https://b.bdstatic.com/searchbox/icms/searchbox/img/ad_api.png',
|
||||
// name: '广告',
|
||||
// open: false,
|
||||
// list: [
|
||||
// {
|
||||
// subName: '激励视频广告',
|
||||
// id: 'rewarded-video-ad'
|
||||
// }
|
||||
// ]
|
||||
// }
|
||||
];
|
||||
|
||||
|
||||
|
||||
export const extensionDictonary = [{
|
||||
subName: '图标',
|
||||
id: 'smt-icon',
|
||||
subNameTra: 'icon'
|
||||
}, {
|
||||
subName: '自定义导航栏',
|
||||
id: 'smt-navigation',
|
||||
subNameTra: 'navigation'
|
||||
}, {
|
||||
subName: '关注引导蒙层',
|
||||
id: 'smt-mask',
|
||||
subNameTra: 'mask'
|
||||
}, {
|
||||
subName: '信息流',
|
||||
id: 'smt-feed',
|
||||
subNameTra: 'feed'
|
||||
}, {
|
||||
subName: '信息流子项',
|
||||
id: 'smt-feed-item',
|
||||
subNameTra: 'feed-item'
|
||||
}, {
|
||||
subName: '页面状态',
|
||||
id: 'smt-status-page',
|
||||
subNameTra: 'status-page'
|
||||
}, {
|
||||
subName: '加载',
|
||||
id: 'smt-spin',
|
||||
subNameTra: 'spin'
|
||||
}, {
|
||||
subName: '刷新',
|
||||
id: 'smt-refresh',
|
||||
subNameTra: 'refresh'
|
||||
}, {
|
||||
subName: '搜索框',
|
||||
id: 'smt-search-bar',
|
||||
subNameTra: 'search-bar'
|
||||
}, {
|
||||
subName: '多行输入框',
|
||||
id: 'smt-textarea',
|
||||
subNameTra: 'textarea'
|
||||
}, {
|
||||
subName: '图片上传器',
|
||||
id: 'smt-image-uploader',
|
||||
subNameTra: 'image-uploader'
|
||||
}, {
|
||||
subName: '页面状态模板',
|
||||
id: 'smt-status-page',
|
||||
subNameTra: ''
|
||||
}, {
|
||||
subName: '信息流模板',
|
||||
id: 'smt-feed-page',
|
||||
subNameTra: ''
|
||||
}, {
|
||||
subName: '图文详情页模板',
|
||||
id: 'smt-detail-pages',
|
||||
subNameTra: ''
|
||||
}, {
|
||||
subName: '登录中间页模板',
|
||||
id: 'get-phone-number',
|
||||
subNameTra: ''
|
||||
}, {
|
||||
subName: '基础政务服务大厅模板',
|
||||
id: 'gov/page-frame/pages/home/index',
|
||||
subNameTra: ''
|
||||
}, {
|
||||
subName: '综合政务服务大厅模板',
|
||||
id: 'gov/service-hall/pages/home/index',
|
||||
subNameTra: ''
|
||||
}, {
|
||||
subName: '公积金查询模板',
|
||||
id: 'gov/fund/pages/index/index',
|
||||
subNameTra: ''
|
||||
}, {
|
||||
subName: '社保查询模板',
|
||||
id: 'gov/social-security/pages/index/index',
|
||||
subNameTra: ''
|
||||
}];
|
||||
export const fragmentDictonary = [{
|
||||
subName: '视频组件控制',
|
||||
id: 'create-video-context/index',
|
||||
subNameTra: 'createVideoContext'
|
||||
}, {
|
||||
subName: '相机组件控制',
|
||||
id: 'camera-context-record/index',
|
||||
subNameTra: 'createCameraContext'
|
||||
}, {
|
||||
subName: '音频组件控制',
|
||||
id: 'create-inner-audio-context/index',
|
||||
subNameTra: 'createInnerAudioContext'
|
||||
}, {
|
||||
subName: 'AR 相机组件控制',
|
||||
id: 'ar-camera-context/index',
|
||||
subNameTra: 'createARCameraContext'
|
||||
}, {
|
||||
subName: '背景音频组件控制',
|
||||
id: 'get-background-audio-manager/index',
|
||||
subNameTra: 'getBackgroundAudioManager'
|
||||
}, {
|
||||
subName: '透明视频组件控制',
|
||||
id: 'animation-video/index',
|
||||
subNameTra: 'createAnimationVideoContext'
|
||||
}, {
|
||||
subName: '直播组件控制',
|
||||
id: 'live-player-context/index',
|
||||
subNameTra: 'createLivePlayerContext'
|
||||
}, {
|
||||
subName: '录音管理器',
|
||||
id: 'recorder-manager/index',
|
||||
subNameTra: 'getRecorderManager'
|
||||
}];
|
||||
760
xhs-mini-demos/entry/search/search.css
Normal file
760
xhs-mini-demos/entry/search/search.css
Normal file
@@ -0,0 +1,760 @@
|
||||
html,
|
||||
body {
|
||||
font-size: 100px;
|
||||
}
|
||||
|
||||
|
||||
/* 组件主体 */
|
||||
.wrap {
|
||||
padding-bottom: .5rem;
|
||||
font-size: .16rem;
|
||||
}
|
||||
|
||||
/* API主体 */
|
||||
.container {
|
||||
font-size: .16rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
/* radio样式 */
|
||||
.radio {
|
||||
display: block;
|
||||
margin: 0 .17rem;
|
||||
padding: .17rem 0;
|
||||
background-color: #FFF;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: block;
|
||||
margin: 0 .17rem;
|
||||
padding: .17rem 0;
|
||||
background-color: #FFF;
|
||||
}
|
||||
|
||||
.item-scroll {
|
||||
display: flex;
|
||||
margin: 0 .17rem;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* 卡片区域 */
|
||||
.card-area {
|
||||
overflow: hidden;
|
||||
margin: .17rem .17rem 0 .17rem;
|
||||
border-radius: 6px;
|
||||
background: #FFF;
|
||||
}
|
||||
|
||||
/* 展示区 */
|
||||
.display-area {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 2.18rem;
|
||||
text-align: center;
|
||||
border-radius: 8px 8px;
|
||||
background: #FFF;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.display-area-image {
|
||||
width: 100%;
|
||||
height: 2.2rem;
|
||||
text-align: center;
|
||||
border-radius: 8px 8px 0 0;
|
||||
}
|
||||
|
||||
/* 描述文字 */
|
||||
.description {
|
||||
height: .46rem;
|
||||
padding-left: .17rem;
|
||||
line-height: .46rem;
|
||||
}
|
||||
|
||||
.top-description {
|
||||
display: flex;
|
||||
padding: .16rem .17rem;
|
||||
font-family: PingFangSC-Medium;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.top-description :first-child {
|
||||
width: 2.93rem;
|
||||
font-size: .15rem;
|
||||
}
|
||||
|
||||
.top-description :nth-child(2) {
|
||||
width: 2.45rem;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: .13rem;
|
||||
text-align: right;
|
||||
color: #999;
|
||||
}
|
||||
/* 模式标题 */
|
||||
.mode-title {
|
||||
display: flex;
|
||||
font-family: PingFangSC-Medium;
|
||||
font-size: .16rem;
|
||||
color: #000;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.mode-title-first {
|
||||
margin-top: .2rem;
|
||||
}
|
||||
|
||||
.mode-title-text {
|
||||
margin: 0 .12rem;
|
||||
}
|
||||
|
||||
.mode-title-line-left {
|
||||
width: .23rem;
|
||||
height: 1px;
|
||||
border-radius: 3px;
|
||||
background-image: linear-gradient(90deg, #F5F5F5 0%, #D5D5D5 100%);
|
||||
}
|
||||
|
||||
.mode-title-line-right {
|
||||
width: .23rem;
|
||||
height: 1px;
|
||||
border-radius: 3px;
|
||||
background-image: linear-gradient(-90deg, #F5F5F5 0%, #D5D5D5 100%);
|
||||
}
|
||||
|
||||
/* 结果文字 */
|
||||
.result-area {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 1.3rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.result-area-fail {
|
||||
width: 2.4rem;
|
||||
margin: 0 auto;
|
||||
font-size: .24rem;
|
||||
text-align: center;
|
||||
color: #F7534F;
|
||||
}
|
||||
|
||||
.result-area-default {
|
||||
width: 2.4rem;
|
||||
margin: 0 auto;
|
||||
font-size: .24rem;
|
||||
text-align: center;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.result-area-succ {
|
||||
width: 2.4rem;
|
||||
margin: 0 auto;
|
||||
font-size: .24rem;
|
||||
text-align: center;
|
||||
color: #38F;
|
||||
}
|
||||
|
||||
.result-area-tips {
|
||||
margin-top: .08rem;
|
||||
font-size: .14rem;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 按纽区 */
|
||||
.button-group {
|
||||
margin: .3rem 0 .2rem 0;
|
||||
}
|
||||
|
||||
swan-button {
|
||||
margin: .2rem .23rem;
|
||||
font-size: .18rem;
|
||||
line-height: .44rem;
|
||||
}
|
||||
|
||||
.flex-button {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: #FFF;
|
||||
}
|
||||
|
||||
/* 一个列表项，和border一起使用 */
|
||||
.list-area {
|
||||
margin: 0 .17rem;
|
||||
padding: .14rem 0;
|
||||
font-family: PingFangSC-Regular;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.list-item-key-4 {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.list-item-key-6 {
|
||||
display: inline-block;
|
||||
width: 1.2rem;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.list-item-value {
|
||||
display: inline-block;
|
||||
width: 2.2rem;
|
||||
vertical-align: middle;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.option-active {
|
||||
background: #F2F2F2;
|
||||
}
|
||||
|
||||
/* 提示 */
|
||||
.tip-week {
|
||||
margin: 0 .14rem .18rem;
|
||||
font-size: .12rem;
|
||||
line-height: .2rem;
|
||||
text-align: center;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.tip-strong {
|
||||
padding: .11rem .23rem;
|
||||
font-size: .1rem;
|
||||
/* height: .57rem; */
|
||||
text-align: center;
|
||||
color: #EE823A;
|
||||
border-radius: 8px 8px 0 0 ;
|
||||
background-color: #FFF9E3;
|
||||
}
|
||||
|
||||
/* ai 列表样式 */
|
||||
.result-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.result-item:not(:last-of-type) {
|
||||
margin-bottom: .24rem;
|
||||
}
|
||||
|
||||
.result-item-key-4 {
|
||||
width: .66rem;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.result-item-key-6 {
|
||||
width: .9rem;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.result-item-value {
|
||||
width: 2.5rem;
|
||||
margin-left: .19rem;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.result-item-value-err {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 底部标识title */
|
||||
.page-title {
|
||||
margin: 1rem 0 .3rem 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.page-title-line {
|
||||
width: .83rem;
|
||||
height: .02rem;
|
||||
margin: 0 auto;
|
||||
background-color: #E6E6E6;
|
||||
}
|
||||
|
||||
.page-title-text {
|
||||
margin-top: .07rem;
|
||||
color: #CCC;
|
||||
}
|
||||
|
||||
.page-top {
|
||||
margin-top: .36rem;
|
||||
text-align: center;
|
||||
}
|
||||
.page-top-line {
|
||||
position: relative;
|
||||
width: .54rem;
|
||||
height: .01rem;
|
||||
margin: 0 auto;
|
||||
border: 0;
|
||||
background-color: #979797;
|
||||
}
|
||||
.page-top-text {
|
||||
margin-bottom: .1rem;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 上下左右边框 */
|
||||
.border-top {
|
||||
position: relative;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.border-top:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: #E6E6E6;
|
||||
-webkit-transform-origin: 0 0;
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
|
||||
.border-right {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.border-right:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 1px;
|
||||
background: #E6E6E6;
|
||||
-webkit-transform-origin: 100% 0;
|
||||
transform-origin: 100% 0;
|
||||
}
|
||||
|
||||
.border-bottom {
|
||||
position: relative;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.border-bottom:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: #E6E6E6;
|
||||
-webkit-transform-origin: 0 100%;
|
||||
transform-origin: 0 100%;
|
||||
}
|
||||
|
||||
.border-left {
|
||||
position: relative;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.border-left:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
background: #E6E6E6;
|
||||
-webkit-transform-origin: left center;
|
||||
transform-origin: left center;
|
||||
}
|
||||
|
||||
.border-all {
|
||||
position: relative;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.border-all:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #E6E6E6;
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
border-radius: 0;
|
||||
background: 0 0;
|
||||
-webkit-transform-origin: 0 0;
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
|
||||
/* 组件样式 */
|
||||
.title {
|
||||
padding: .3rem .22rem .18rem .22rem;
|
||||
font-size: .15rem;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
|
||||
|
||||
swan-button[type="primary"] {
|
||||
background: #38F;
|
||||
}
|
||||
|
||||
/* 适配各种屏幕 */
|
||||
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
|
||||
not all {
|
||||
.border-top:before,
|
||||
.border-bottom:after {
|
||||
-webkit-transform: scaleY(.66666667);
|
||||
transform: scaleY(.66666667);
|
||||
}
|
||||
|
||||
.border-right:after,
|
||||
.border-left:before {
|
||||
-webkit-transform: scaleX(.66666667);
|
||||
transform: scaleX(.66666667);
|
||||
}
|
||||
|
||||
.border-all:before {
|
||||
width: 150%;
|
||||
height: 150%;
|
||||
-webkit-transform: scale(.66666667);
|
||||
transform: scale(.66666667);
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (-webkit-min-device-pixel-ratio: 2),
|
||||
not all {
|
||||
.border-top:before,
|
||||
.border-bottom:after {
|
||||
-webkit-transform: scaleY(.5);
|
||||
transform: scaleY(.5);
|
||||
}
|
||||
|
||||
.border-right:after,
|
||||
.border-left:before {
|
||||
-webkit-transform: scaleX(.5);
|
||||
transform: scaleX(.5);
|
||||
}
|
||||
|
||||
.border-all:before {
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
-webkit-transform: scale(.48);
|
||||
transform: scale(.48);
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (-webkit-min-device-pixel-ratio: 3),
|
||||
not all {
|
||||
.border-top:before,
|
||||
.border-bottom:after {
|
||||
-webkit-transform: scaleY(.33333333);
|
||||
transform: scaleY(.33333333);
|
||||
}
|
||||
|
||||
.border-right:after,
|
||||
.border-left:before {
|
||||
-webkit-transform: scaleX(.33333333);
|
||||
transform: scaleX(.33333333);
|
||||
}
|
||||
|
||||
.border-all:before {
|
||||
width: 300%;
|
||||
height: 300%;
|
||||
-webkit-transform: scale(.3326);
|
||||
transform: scale(.3326);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 320px) {
|
||||
html {
|
||||
font-size: 77.2946px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 375px) {
|
||||
html {
|
||||
font-size: 90.5797px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 414px) {
|
||||
html {
|
||||
font-size: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.search-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
font-size: .16rem;
|
||||
}
|
||||
|
||||
.search {
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
.search-box {
|
||||
background-color: rgba(51, 51, 51, 0.025);
|
||||
color: #000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
border-radius: 20px;
|
||||
padding: 4px 10px;
|
||||
flex: 1;
|
||||
}
|
||||
.search-box:before {
|
||||
content: "";
|
||||
pointer-events: none;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
border-radius: 18px;
|
||||
transform: scale(.5);
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
.search-input {
|
||||
display: inline-block;
|
||||
line-height: .3rem;
|
||||
height: .3rem;
|
||||
font-size: .16rem;
|
||||
text-align: left;
|
||||
}
|
||||
.search-input-sear {
|
||||
display: inline-block;
|
||||
line-height: .3rem;
|
||||
height: .3rem;
|
||||
font-size: .16rem;
|
||||
text-align: left;
|
||||
color: #CCC;
|
||||
}
|
||||
.search-icon {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.search-icon image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.searchholder {
|
||||
color: #ccc;
|
||||
font-size: 14px;
|
||||
}
|
||||
.search-sear {
|
||||
color: #ccc;
|
||||
padding: 0 .1rem;
|
||||
position: absolute;
|
||||
font-size: .16rem;
|
||||
}
|
||||
.search-deep {
|
||||
color: #666;
|
||||
padding: 0 .1rem;
|
||||
position: absolute;
|
||||
font-size: .16rem;
|
||||
}
|
||||
|
||||
@media screen
|
||||
and (device-width: 360px)
|
||||
and (device-height: 640px)
|
||||
and (-webkit-device-pixel-ratio: 3) {
|
||||
.search-sear {
|
||||
padding-top: .02rem;
|
||||
}
|
||||
.red {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
.active {
|
||||
color: rgba(102, 102, 102, 1);
|
||||
}
|
||||
.btn-hover {
|
||||
color: rgba(102, 102, 102, .2);
|
||||
}
|
||||
|
||||
.search-input-clear {
|
||||
background: url(https://b.bdstatic.com/searchbox/icms/searchbox/img/clear-pressed.png) no-repeat center;
|
||||
background-size: contain;
|
||||
width: .18rem;
|
||||
height: .18rem;
|
||||
margin: 0;
|
||||
margin-left: auto;
|
||||
}
|
||||
.search-input-clear::after,
|
||||
.search-clear-hover::after {
|
||||
border: none !important;
|
||||
}
|
||||
.search-clear-hover {
|
||||
background: url(https://b.bdstatic.com/searchbox/icms/searchbox/img/clear-pressed.png) no-repeat center;
|
||||
background-size: contain;
|
||||
width: .18rem;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
right: .6rem;
|
||||
}
|
||||
|
||||
.search-his,
|
||||
.search-hot,
|
||||
.search-result {
|
||||
flex: 1;
|
||||
padding: 8px 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.his-title {
|
||||
font-size: .15rem;
|
||||
color: #000;
|
||||
height: .44rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.his-icon {
|
||||
background: url(https://b.bdstatic.com/searchbox/icms/searchbox/img/clear-pressed.png) no-repeat center;
|
||||
background-size: contain;
|
||||
width: .18rem;
|
||||
height: .18rem;
|
||||
margin-right: .06rem;
|
||||
}
|
||||
|
||||
.hot-title {
|
||||
font-size: .15rem;
|
||||
color: #000;
|
||||
line-height: .44rem;
|
||||
}
|
||||
|
||||
.his-content,
|
||||
.hot-content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.his-item,
|
||||
.hot-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0 .1rem .1rem 0;
|
||||
background: #f5f5f5;
|
||||
padding: .05rem .14rem;
|
||||
border-radius: .16rem;
|
||||
font-size: .15rem;
|
||||
line-height: .2rem;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.compontent {
|
||||
margin-bottom: .2rem;
|
||||
}
|
||||
|
||||
.result-title {
|
||||
line-height: .44rem;
|
||||
font-size: .20rem;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.result-list {
|
||||
height: 50px;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.result-up {
|
||||
background: url(https://b.bdstatic.com/searchbox/icms/searchbox/img/right_arrow.png) no-repeat center;
|
||||
background-size: contain;
|
||||
width: .26rem;
|
||||
height: .26rem;
|
||||
}
|
||||
|
||||
.empty-result {
|
||||
height: calc(100vh - .82rem);
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: .2rem;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
width: 90px;
|
||||
margin-top: 100px;
|
||||
margin-left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.empty-icon image {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.empty-msg {
|
||||
font-size: .16rem;
|
||||
color: #666;
|
||||
margin-top: .33rem;
|
||||
}
|
||||
|
||||
.search-button {
|
||||
width: 60px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.search-tag {
|
||||
display: flex;
|
||||
min-height: 44px;
|
||||
justify-content:center;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.search-tag > view {
|
||||
display: flex;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 60px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
color: #33333399;
|
||||
}
|
||||
|
||||
.search-tag-select {
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
color: black !important;
|
||||
}
|
||||
|
||||
.search-tag-select::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 7px;
|
||||
left: 16px;
|
||||
right: 16px;
|
||||
height: 2px;
|
||||
background-color: #FF2442;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.result_inner {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
283
xhs-mini-demos/entry/search/search.js
Normal file
283
xhs-mini-demos/entry/search/search.js
Normal file
@@ -0,0 +1,283 @@
|
||||
/**
|
||||
* @file search page
|
||||
* @author zhouyangjie
|
||||
*/
|
||||
|
||||
/* global Page, xhs */
|
||||
import {
|
||||
componentDictionary,
|
||||
apiDictionary,
|
||||
extensionDictonary,
|
||||
fragmentDictonary
|
||||
} from './dictionary';
|
||||
|
||||
let last = '';
|
||||
|
||||
Page({
|
||||
|
||||
data: {
|
||||
value: '',
|
||||
focus: false,
|
||||
likeFocus: false,
|
||||
component: [],
|
||||
api: [],
|
||||
extensions: [],
|
||||
fragment: [],
|
||||
history: [],
|
||||
hot: [{subName: '支付', id: 'payment'},
|
||||
{subName: '拨打电话', id: 'make-phone-call'},
|
||||
{subName: '语音识别', id: 'get-voice-manager'},
|
||||
{subName: '车型识别', id: 'car-classify'},
|
||||
{subName: '动物识别', id: 'animal-classify'},
|
||||
{subName: '植物识别', id: 'plant-classify'},
|
||||
{subName: '设置页面标题', id: 'set-navigation-bar-title'}],
|
||||
hasResult: false,
|
||||
hasHistory: true,
|
||||
showEmptyResult: false,
|
||||
blur: true,
|
||||
subPackageName: '',
|
||||
tag: 'all',
|
||||
scrollInto: 'components',
|
||||
top: 0,
|
||||
apiHeight: 0,
|
||||
comHeight: 0,
|
||||
},
|
||||
onShow() {
|
||||
this.getHistoryStorage();
|
||||
},
|
||||
onLoad() {
|
||||
setTimeout(() => {
|
||||
this.setData({
|
||||
focus: true
|
||||
});
|
||||
}, 500);
|
||||
},
|
||||
searchFocus(e) {
|
||||
this.setData({
|
||||
focus: true
|
||||
});
|
||||
if (e.detail.value !== '') {
|
||||
this.setData({
|
||||
likeFocus: true
|
||||
});
|
||||
}
|
||||
},
|
||||
searchInput(e) {
|
||||
const value = e.detail.value;
|
||||
clearTimeout(this.timeId);
|
||||
this.setData({
|
||||
value,
|
||||
likeFocus: true,
|
||||
component: [],
|
||||
api: [],
|
||||
extensions: [],
|
||||
fragment: [],
|
||||
hasResult: false,
|
||||
showEmptyResult: false
|
||||
});
|
||||
if (!value) {
|
||||
this.setData({
|
||||
likeFocus: false
|
||||
});
|
||||
this.resetResult();
|
||||
return false;
|
||||
}
|
||||
if (value.length === 1 && /[a-zA-Z]/.test(value)) {
|
||||
this.resetResult();
|
||||
return false;
|
||||
}
|
||||
this.timeId = setTimeout(() => {
|
||||
this.getSearchResult(value);
|
||||
this.searchConfirm(value);
|
||||
}, 100);
|
||||
},
|
||||
searchConfirm(e) {
|
||||
const value = this.getData('value').replace(/\s/gi, '');
|
||||
if (value) {
|
||||
this.setData({
|
||||
showEmptyResult: true,
|
||||
hasHistory: true
|
||||
});
|
||||
this.getSearchResult(value);
|
||||
this.setHistoryStorage(value);
|
||||
}
|
||||
|
||||
this.setData({
|
||||
likeFocus: false
|
||||
});
|
||||
this.setData({
|
||||
focus: false
|
||||
});
|
||||
},
|
||||
searchBlur(e) {
|
||||
if (e.detail.value === '') {
|
||||
this.setData({
|
||||
likeFocus: false,
|
||||
focus: false
|
||||
});
|
||||
}
|
||||
else if (this.getData('showEmptyResult')) {
|
||||
this.setData({
|
||||
focus: false
|
||||
});
|
||||
}
|
||||
|
||||
let showEmptyResult = this.getData('showEmptyResult');
|
||||
if (showEmptyResult) {
|
||||
this.setData({
|
||||
likeFocus: false
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
searchClear() {
|
||||
this.setData({
|
||||
value: '',
|
||||
likeFocus: false,
|
||||
component: [],
|
||||
api: [],
|
||||
extensions: [],
|
||||
fragment: [],
|
||||
hasResult: false,
|
||||
showEmptyResult: false
|
||||
});
|
||||
},
|
||||
historyClear() {
|
||||
xhs.showModal({
|
||||
content: '确定清空相关历史？',
|
||||
confirmText: '确定',
|
||||
cancelText: '取消',
|
||||
success: res => {
|
||||
if (res.cancel) {
|
||||
}
|
||||
else if (res.confirm) {
|
||||
this.setData({
|
||||
history: [],
|
||||
hasHistory: false
|
||||
});
|
||||
xhs.clearStorageSync('history');
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
},
|
||||
getSearchResult(value) {
|
||||
let newValue = value.toLowerCase();
|
||||
const component = componentDictionary.filter(item =>
|
||||
item.subName.indexOf(value) > -1
|
||||
|| (item.searchId ? item.searchId.toLowerCase().indexOf(newValue) > -1 : '')
|
||||
);
|
||||
const api = apiDictionary.filter(item =>
|
||||
item.subName.indexOf(value) > -1
|
||||
|| item.id.toLowerCase().indexOf(newValue) > -1
|
||||
);
|
||||
const extensions = extensionDictonary.filter(item =>
|
||||
item.subName.indexOf(value) > -1
|
||||
|| item.id.toLowerCase().indexOf(newValue) > -1
|
||||
);
|
||||
const fragment = fragmentDictonary.filter(item =>
|
||||
item.subName.indexOf(value) > -1
|
||||
|| item.id.toLowerCase().indexOf(newValue) > -1
|
||||
);
|
||||
const hasResult = component.length || api.length || extensions.length || fragment.length;
|
||||
this.setData({
|
||||
component, api, extensions, fragment, hasResult,
|
||||
apiHeight: component.length * 50 + 68, tag: 'all', comHeight: api.length * 50 + 68
|
||||
});
|
||||
},
|
||||
compareDictionary(value) {},
|
||||
resetResult() {
|
||||
this.setData({
|
||||
component: [],
|
||||
api: [],
|
||||
extensions: [],
|
||||
fragment: [],
|
||||
hasResult: false
|
||||
});
|
||||
},
|
||||
openPage(e) {
|
||||
let {item, prepath} = e.currentTarget.dataset;
|
||||
let id = item.id;
|
||||
|
||||
if (prepath === 'component-case') {
|
||||
xhs.navigateTo({
|
||||
url: `/component-case/${id}/${id}`
|
||||
});
|
||||
} else if (prepath === 'api-case') {
|
||||
xhs.navigateTo({
|
||||
url: `/api-case/${id}/${id}`
|
||||
});
|
||||
}
|
||||
},
|
||||
setHistoryStorage(value) {
|
||||
const history = this.getData('history');
|
||||
const index = history.findIndex(item => item === value);
|
||||
if (index > -1) {
|
||||
history.splice(index, 1);
|
||||
}
|
||||
|
||||
history.unshift(value);
|
||||
xhs.setStorageSync('history', history);
|
||||
this.setData('history', history);
|
||||
},
|
||||
getHistoryStorage() {
|
||||
let history = xhs.getStorageSync('history') || [];
|
||||
if (history.length === 0) {
|
||||
this.setData('hasHistory', false);
|
||||
}
|
||||
else {
|
||||
this.setData('hasHistory', true);
|
||||
}
|
||||
if (!Array.isArray(history)) {
|
||||
history = [];
|
||||
}
|
||||
|
||||
this.setData('history', history);
|
||||
},
|
||||
openSearch(e) {
|
||||
const word = e.currentTarget.dataset.word;
|
||||
this.setData({
|
||||
value: word
|
||||
});
|
||||
this.getSearchResult(word);
|
||||
this.searchConfirm(word);
|
||||
},
|
||||
|
||||
setTag(e) {
|
||||
if (e.target.dataset.tag === 'all') {
|
||||
this.setData({
|
||||
tag: e.target.dataset.tag,
|
||||
scrollInto: 'components'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
last = '';
|
||||
this.setData({
|
||||
tag: e.target.dataset.tag,
|
||||
scrollInto: e.target.dataset.tag,
|
||||
});
|
||||
},
|
||||
|
||||
handleScroll(e) {
|
||||
if (last !== 'scroll') {
|
||||
last = 'scroll';
|
||||
return;
|
||||
}
|
||||
|
||||
if ((this.data.tag === 'all' || this.data.tag === 'components') && e.detail.scrollTop < this.data.apiHeight - 10) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (e.detail.scrollTop >= this.data.apiHeight - 10) {
|
||||
|
||||
this.setData({
|
||||
tag: 'apis'
|
||||
});
|
||||
} else {
|
||||
this.setData({
|
||||
tag: 'components'
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
8
xhs-mini-demos/entry/search/search.json
Normal file
8
xhs-mini-demos/entry/search/search.json
Normal file
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"navigationBarTitleText": "搜索",
|
||||
"navigationBarBackgroundColor": "#ffffff",
|
||||
"usingComponents": {
|
||||
"showbox": "../../common/component/showbox/index",
|
||||
"box": "../../common/component/container/index"
|
||||
}
|
||||
}
|
||||
113
xhs-mini-demos/entry/search/search.xhsml
Normal file
113
xhs-mini-demos/entry/search/search.xhsml
Normal file
@@ -0,0 +1,113 @@
|
||||
<view class="search-container">
|
||||
<!-- 搜索框 -->
|
||||
<view class="search">
|
||||
<view class="search-box">
|
||||
<view class="search-icon">
|
||||
<image src="../../image/search_1.5.png"></image>
|
||||
</view>
|
||||
<input class="search-input"
|
||||
style="max-width:70%;"
|
||||
type="text"
|
||||
focus="{{focus}}"
|
||||
placeholder="搜索组件或能力"
|
||||
model:value="{{value}}"
|
||||
placeholder-class="searchholder"
|
||||
bindfocus="searchFocus"
|
||||
bindinput="searchInput"
|
||||
bindconfirm="searchConfirm"
|
||||
confirm-type="search"
|
||||
bindblur="searchBlur"
|
||||
/>
|
||||
<button xhs:if="{{value}}" class="search-input-clear" bindtap="searchClear"></button>
|
||||
</view>
|
||||
<view class="search-button">
|
||||
<view class="{{value ? 'search-deep' : 'search-sear'}}" bindtap="searchConfirm">搜索</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="search-tag" xhs:if="{{hasResult}}">
|
||||
<view data-tag="all" class="{{tag === 'all' ? 'search-tag-select' : ''}}" bindtap="setTag">
|
||||
全部
|
||||
</view>
|
||||
<view data-tag="components" class="{{tag === 'components' ? 'search-tag-select' : ''}}" bindtap="setTag">
|
||||
组件
|
||||
</view>
|
||||
<view data-tag="apis" class="{{tag === 'apis' ? 'search-tag-select' : ''}}" bindtap="setTag">
|
||||
能力
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 输入框占位 -->
|
||||
<!-- <view style="height:0.52rem;"></view> -->
|
||||
|
||||
<!-- <view xhs:if="{{!hasResult && !showEmptyResult}}">
|
||||
<view xhs:if="{{hasHistory}}" class="search-his">
|
||||
<view class="his-title">
|
||||
<view>历史</view>
|
||||
<view class="his-icon" bindtap="historyClear"></view>
|
||||
</view>
|
||||
<view class="his-content">
|
||||
<view class="his-item" xhs:for-items="{{history}}" xhs:key="*item" bindtap="openSearch" data-word="{{item}}">{{item}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="search-hot">
|
||||
<view class="hot-title">热门</view>
|
||||
<view class="hot-content">
|
||||
<view class="hot-item" xhs:for-items="{{hot}}" bindtap="openPage" data-item="{{item}}" data-prepath="swan-api">{{item.subName}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
|
||||
<!-- 搜索结果 -->
|
||||
|
||||
<view xhs:if="{{hasResult}}" class="search-result">
|
||||
<scroll-view style="height: 100%;" scroll-y show-scrollbar="{{false}}" scroll-with-animation scroll-into-view="{{scrollInto}}" bindscroll="handleScroll">
|
||||
<!-- <showbox title="组件" xhs:if="{{component.length && (tag === 'all' || tag === 'components')}}"> -->
|
||||
|
||||
<view id="components" style="overflow: hidden;" xhs:if="{{component.length}}">
|
||||
<showbox title="组件" >
|
||||
<box pt="0" pb="0">
|
||||
<view class="result-list" xhs:for-items="{{component}}" data-item="{{item}}" data-prepath="component-case" bindtap="openPage">
|
||||
<view>{{item.subName}}</view>
|
||||
<view class="result-up"></view>
|
||||
</view>
|
||||
</box>
|
||||
</showbox>
|
||||
</view>
|
||||
|
||||
<!-- <showbox title="能力演示" xhs:if="{{api.length && (tag === 'all' || tag === 'apis')}}"> -->
|
||||
<view id="apis" xhs:if="{{api.length}}">
|
||||
<showbox title="能力演示">
|
||||
<box pt="0" pb="0">
|
||||
<view class="result-list" xhs:for-items="{{api}}" data-item="{{item}}" data-prepath="api-case" bindtap="openPage">
|
||||
<view>{{item.subName}}</view>
|
||||
<view class="result-up"></view>
|
||||
</view>
|
||||
</box>
|
||||
</showbox>
|
||||
</view>
|
||||
<view style="height: calc(100% - {{apiHeight + comHeight}}px + {{apiHeight}}px);"></view>
|
||||
|
||||
<!-- <view xhs:if="{{ api.length || fragment.length }}" class="api">
|
||||
<view class="result-title border-bottom">接口</view>
|
||||
<view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view xhs:if="{{extensions.length}}" class="extensions">
|
||||
<view class="result-title border-bottom">扩展能力</view>
|
||||
<view>
|
||||
<view class="result-list border-bottom" xhs:for-items="{{extensions}}" data-item="{{item}}" data-prepath="extensions" bindtap="openPage">
|
||||
<view>{{item.subName}}</view>
|
||||
<view class="result-up"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<!-- 搜索无结果 -->
|
||||
<view xhs:if="{{!hasResult && showEmptyResult}}" class="empty-icon">
|
||||
<image src="../../image/nosearch.png" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
Reference in New Issue
Block a user