Skip to content

Q
q-trip

lanwenshuai / q-trip

通知 1
Star 0
Fork 0
Q
q-trip

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 aca947c0 编写于 作者: lanwenshuai's avatar lanwenshuai
浏览文件
操作

version: 0.1

上级
隐藏空白更改
内联 并排
Showing with 1418 addition and 0 deletion
.hbuilderx/launch.json 0 → 100644
浏览文件 @ aca947c0
{ // launch.json 配置了启动调试时相关设置，configurations下节点名称可为 app-plus/h5/mp-weixin/mp-baidu/mp-alipay/mp-qq/mp-toutiao/mp-360/
// launchtype项可配置值为local或remote, local代表前端连本地云函数，remote代表前端连云端云函数
"version": "0.0",
"configurations": [{
"type": "uniCloud",
"default": {
"launchtype": "local"
}
}
]
}
App.vue 0 → 100644
浏览文件 @ aca947c0
<script>
export default {
// onLaunch: function() {
// console.log('App Launch')
// },
// onShow: function() {
// console.log('App Show')
// },
// onHide: function() {
// console.log('App Hide')
// }
}
</script>
<style>
/*每个页面公共css */
*{
margin: 0;
padding: 0;
font-family: Arial,"Lucida Grande","Microsoft Yahei","Hiragino Sans GB","Hiragino Sans GB W3",SimSun,"PingFang SC",STHeiti;
}
</style>
components/index/banner.vue 0 → 100644
浏览文件 @ aca947c0
<template>
<view class="">
<view class="banner">
</view>
</view>
</template>
<script>
</script>
<style lang="scss">
.banner{
width: 100%;
height: 500px;
background-color: pink;
}
</style>
components/index/body.vue 0 → 100644
浏览文件 @ aca947c0
<template>
<view class="content">
<!-- 第一行 -->
<view class="title">
<view v-for="(index,i) in titConten" :key='i' class="title-font" :style="{backgroundPositionY:index.position}">
<view class="font-1">
{{index.title}}
</view>
<view class="font-2">
{{index.content}}
</view>
</view>
</view>
<!-- 第二行 -->
<view class="body">
<!-- 左边 -->
<view class="body-left">
<!-- 左 标题栏 -->
<view class="left-title">
<navigator url="#">
<image src="../../static/index/body/left-title.png" style="width: 218px;height: 31px;"></image>
</navigator>
</view>
<!-- 左 专栏 -->
<view class="left-column">
<view class="column-title">
<navigator url="#" class="titColor">旅行家专栏</navigator>
<navigator url="#" class="titIndex">专栏首页</navigator>
</view>
<view >
<!-- 原生轮播 -->
<swiper :indicator-dots="true" :autoplay="false" circular="true" class="left-banner" >
<swiper-item style="height: 500px;" v-for="(item,i) in banner" :key='i' >
<image :src='item.src' :draggable="false" mode="scaleToFill" class="banner" >
</image>
<view style="padding: 0 10px;">
<view class="banner-left">{{item.title}}</view>
<view class="banner-right">{{item.detail}}</view>
</view>
</swiper-item>
</swiper>
<!-- 扩展轮播 -->
<!-- <uni-swiper-dot :info="banner" :current="current" :mode="mode" class="left-banner" :dotsStyles="dotsStyles" >
<swiper autoplay="false" class="swiper-box aaa" @change="change" circular="true" interval='300000' >
<swiper-item v-for="(item ,i) in banner" :key="i" class="banner" >
<view class="swiper-item" >
<image :src='item.src' :draggable="false" mode="scaleToFill" class="banner" >
</view>
<view style="padding: 0 5px;">{{item.detail}}</view>
</swiper-item>
</swiper>
</uni-swiper-dot> -->
</view>
</view>
</view>
<!-- 右边 -->
<view class="body-right">
</view>
</view>
</view>
</template>
<script>
export default {
name:"index-header",
data() {
return {
//title 精灵图
titConten:[
{
position:'-650px',
title:'自由行',
content:'旅行就要更自在'
},
{
position:'-24px',
title:'跟团游',
content:'行程透明省心游'
},
{
position:'-129px',
title:'当地游',
content:'最地道的玩法体验'
},
{
position:'-441px',
title:'机票',
content:'特惠一折起'
},
{
position:'-546px',
title:'订酒店',
content:'一键全网性价比'
},
{
position:'-335px',
title:'签证',
content:'出签率高服务佳'
},
{
position:'-233px',
title:'邮轮',
content:'移动的海上城堡'
}
],
banner:[
{
src:'../../static/index/banner/1.jpeg',
url:'#',
title:'夏木尼，小王子的玫瑰城市',
detail:'夏木尼（Chamounix）是法国勃朗峰脚下最著名的小城，《小王子》里的玫瑰城市，世界登山运动的发源地。'
},
{
src:'../../static/index/banner/2.jpeg',
url:'#',
title:'暹粒油淋鱼',
detail:'默默等待，鱼上桌，迅速夹一口塞在嘴里——我就像个戒烟多日的老烟枪终于抽上了烟，心里的空洞瞬间被填满了。'
},
{
src:'../../static/index/banner/3.jpeg',
url:'#',
title:'西安：旧长安的画皮',
detail:'西安这座曾经的13朝古都，在今天更像旧长安的画皮，城墙完整绵延，一切就像一张唐画的影印本。'
},
{
src:'../../static/index/banner/4.jpeg',
url:'#',
title:'漫山岛',
detail:'漫山岛在第二条路上，满眼都是天赋，却偏爱挥霍青山绿水，用自己的方式过小日子，即便强行拖它起来，也得不到结果。'
},
{
src:'../../static/index/banner/5.jpeg',
url:'#',
title:' 胡日尔镇的美术馆',
detail:'我最终从胡日尔的美术馆里带走了一幅画，画的是冬日的萨满岩，是日落时分。'
}
],
//存放轮播图的index
//扩展轮播 start
// current: 0,
// mode: 'round',
// dotsStyles:{
// width:10
// }
//扩展轮播 end
};
},
methods:{
//拓展轮播
// change(e) {
// this.current = e.detail.current;
// }
}
}
</script>
<style lang="scss">
.content{
width: 1000px;
margin: 0 auto;
padding:0 20px;
}
//第一行
.title{
display: flex;
justify-content: space-around;
padding:20px 0 ;
//框内样式
.title-font{
border: 1px solid #e5e5e5;
width: 127px;
height: 47px;
background:url(~@/static/index/body/jinglingtu.png) no-repeat;
// background: url();
padding:10px 0 0 5px;
// background-repeat: no-repeat;
background-size:104px auto ;
background-position-x:60px;
// background-position-y:-650px;
//内容1
.font-1{
font-weight: bolder;
}
//内容2
.font-2{
font-size: 12px;
color: #9d9d9d;
line-height: 20px;
}
}
}
.body{
//左栏 标题字 左
.titColor{
color: #333;
font-size: 18px;
}
//左栏 标题字 右
.titIndex{
color: #999;
font-size: 12px;
}
//左栏
.banner-left{
color: #333;
font-size: 16px;
line-height: 26px;
// margin-bottom: 10px;
}
.banner-right{
font-size: 14px;
line-height: 20px;
height: 60px;
overflow: hidden;
color: #666;
}
.body-left{
float: left;
width: 260px;
//左标示图
.left-title{
margin-bottom: 30px;
}
//专栏
.left-column{
//专栏 标题文字
.column-title{
margin-bottom: 12px;
height: 35px;
&>navigator{
line-height:35px ;
}
&>navigator:nth-child(1){
float: left;
}
&>navigator:nth-child(2){
float: right;
}
}
//轮播图框
// .aaa{
// border: 1px solid #000;
// &>:nth-child(1){
// overflow: visible;
// }
// }
.left-banner{
height: 280px;
//轮播图大小
& /deep/ .uni-swiper-dots-horizontal{
// border: 1px solid #FF9D00;
bottom: 50%;
transform: translate(10px);
.uni-swiper-dot{
border-radius: 5px;
width: 15px;
background-color: rgba(255,255,255,.8);
}
.uni-swiper-dot:hover{
background-color: #ff9d00;
}
.uni-swiper-dot-active{
background-color: #ff9d00;
}
}
.banner{
width: 260px;
height: 150px;
cursor: auto;
}
}
}
}
.body-right{
float: right;
}
}
.body::after{
content: '';
clear: both;
height: 0;
display: block;
overflow: hidden;
}
</style>
components/index/header.vue 0 → 100644
浏览文件 @ aca947c0
<template>
<view>
<!-- #ifdef H5 -->
<view class="head">
<view class="head-box">
<view class="head-logo">
<navigator url="#" class="logo"></navigator>
</view>
<view class="head-nav uni-flex">
<view class="nav">
<navigator url="#">首页</navigator>
</view>
<view class="nav">
<navigator url="#">目的地</navigator>
</view>
<view class="nav">
<navigator url="#">旅游攻略</navigator>
</view>
<view class="nav-xl nav">
<view class="nav-xl-nav">
<navigator url="#">
<text>去旅行</text>
<text class="nav-icon"></text>
</navigator>
</view>
<view class="xl">
<view class="xl-br">自由行
<text class=" xl-icon">hot</text>
</view>
<view class="xl-br">跟团游</view>
<view class="xl-br">当地游</view>
<view class="xl-br">邮轮</view>
<view class="xl-br">签证</view>
</view>
</view>
<view class="nav">
<navigator url="#">机票火车</navigator>
</view>
<view class="nav">
<navigator url="#">订酒店</navigator>
</view>
<view class="nav-xl nav">
<view class="nav-xl-nav">
<navigator url="#">
<text>社区</text>
<text class="nav-icon"></text>
</navigator>
</view>
<view class="xl nav-sq-xl">
<view class="xl-br">问答
<text class=" xl-icon">hot</text>
</view>
<view class="xl-br">周边</view>
<view class="xl-br">穷游俱乐部</view>
<view class="xl-br">同城</view>
<view class="xl-br">照片PK</view>
<view class="xl-br">真人show</view>
</view>
</view>
<view class="nav">
<navigator url="#">APP</navigator>
</view>
<view class="nav">
<navigator url="#" class="nav-logo"></navigator>
</view>
</view>
<view class="head-login">
<navigator url="#" class="login-wb login-icon"></navigator>
<navigator url="#" class="login-qq login-icon"></navigator>
<navigator url="#" class="login-wx login-icon"></navigator>
<navigator url="#" class="login-size">登录</navigator>
<text>|</text>
<navigator url="#" class="login-size">注册</navigator>
</view>
</view>
<view class="head-bottom"></view>
</view>
<!-- #endif -->
</view>
</template>
<script>
export default {
name:"index-header",
data() {
return {
list:[
{title:'首页'}
]
};
}
}
</script>
<style lang="scss">
$color:#ff9d00;
//最大屏
@media (min-width:1440px) {
.head-box{
height: 68px;
.head-logo{
padding: 16px 0 14px;
.logo{
// width: 120px;
height: 39px;
background: url(../../static/index/header/header-sprites15.png)no-repeat 0 0 ;
}
}
.head-nav{
view{
line-height: 68px;
}
.nav:hover{
color: $color;
border-bottom: 3px solid $color;
z-index: 999;
height: 62px;
}
.xl{
top:65px
}
.nav-logo{
height: 68px;
}
}
.head-login{
padding: 16px 0;
}
}
}
//最小屏
@media (max-width:1440px) {
.head-box{
height: 58px;
.head-logo{
padding: 13px 0 13px 15px;
.logo{
width: 120px;
height: 33px;
background: url(../../static/index/header/header-small-sprites3.png)no-repeat 0 0 ;
}
}
.head-nav{
line-height: 52px;
.nav:hover{
color: $color;
border-bottom: 3px solid $color;
z-index: 999;
height: 58px;
}
.xl{
top: 53px;
}
.nav-icon{
border-top: 4px solid #666;
border-left:4px dashed transparent;
border-right: 4px dashed transparent;
display: inline-block;
margin: 0 -5px 0 3px;
vertical-align: middle;
}
.nav-logo{
height: 58px;
}
}
.head-login{
padding: 14px 0;
}
}
}
.head{
position: relative;
.head-box{
// background-color: pink;
width: 1200px;
margin: 0 auto;
.head-logo{
float: left;
width: 136px;
}
//导航栏
.head-nav{
height: 100%;
display: flex;
padding: 0 20px;
font-size: 16px;
// position: relative;
float: left;
color: #333;
.nav{
padding: 2px 16px;
z-index: 4;
border-top: 1px solid #fff;
border-bottom: 0;
}
.nav-icon{
border-top: 4px solid #666;
border-left:4px dashed transparent;
border-right: 4px dashed transparent;
display: inline-block;
margin: 0 -5px 0 3px;
vertical-align: middle;
}
.nav-xl{
position: relative;
display: block;
border-top:2px solid rgba(255,255,255,0);
border-left:1px solid rgba(255,255,255,0);
border-right:1px solid rgba(255,255,255,0);
box-sizing:border-box;
}
.nav-xl:hover{
border-top:2px solid $color;
border-left:1px solid #999;
border-right:1px solid #999;
}
.nav-xl:hover .xl{
display: block;
}
.xl{
// height: 230px;
width: 140px;
font-size: 14px;
display: none;
padding: 0;
position: absolute;
// background-color: rgba(255,255,255,.95);
background-color:rgba(255,255,255,.8);
border:1px solid #d6d6d6;
line-height: 40px;
left: -1px;
z-index: 3;
color: #333;
border-color: #eaeaea;
view{
padding: 2px 20px;
}
.xl-icon{
background-color: #f46240;
margin-left: 15px;
position: absolute;
line-height: 14px;
top: 12px;
left: 65px;
color: #fff;
font-size: 14px;
}
.xl-icon::before{
content: '';
border-right: 7px solid #f46240;
border-top:7px solid transparent;
border-bottom:7px solid transparent;
position: absolute;
width: 0;
height: 0;
left: -7px;
}
.xl-br:hover{
background-color: #eee;
}
}
.nav-logo{
background: url(../../static/index/header/mfwzx.png)no-repeat center; background-size: 75px 30px;
width: 75px;
}
}
//右图标
.head-login{
float: right;
color: #ff9d00;
font-size: 14px;
height: 26px;
overflow: hidden;
>navigator{
display: inline-block;
}
>text{
padding: 0 10px;
color: #c9c9c9;
}
.login-icon{
width: 26px;
height: 26px;
background-image:url(../../static/index/header/header-sprites15.png);
margin-right: 10px;
vertical-align: -7px;
}
.login-wb{
background-position: 0 -50px;;
}
.login-wb:hover{
background-position: 0 -80px;
}
.login-qq{
background-position: -30px -50px;
}
.login-qq:hover{
background-position: -30px -80px;
}
.login-wx{
background-position: 0 -165px;
}
.login-wx:hover{
background-position: -30px -165px;
}
.login-size:hover{
text-decoration: underline;
}
}
}
.head-bottom{
width: 100%;
border-top: 1px solid #d6d6d6;
position: absolute;
background-color: rgba(0,0,0,.06);
bottom: 0;
z-index: 2s;
height: 2px;
}
}
</style>
components/index/index-header.vue 0 → 100644
浏览文件 @ aca947c0
<template>
<view>
<!-- #ifdef H5 -->
<view class="head-box">
<view class="head-logo">
<navigator url="#" class="logo"></navigator>
</view>
<view class="head-nav uni-flex">
<view>
<navigator url="#">首页</navigator>
</view>
<view>
<navigator url="#">目的地</navigator>
</view>
<view>
<navigator url="#">旅游攻略</navigator>
</view>
<view>
<navigator url="#">去旅行</navigator>
</view>
<view>
<navigator url="#">机票火车</navigator>
</view>
<view>
<navigator url="#">订酒店</navigator>
</view>
<view>
<navigator url="#">社区</navigator>
</view>
<view>
<navigator url="#">APP</navigator>
</view>
<view>
<navigator url="#" class="nav-logo"></navigator>
</view>
</view>
</view>
<!-- #endif -->
</view>
</template>
<script>
export default {
name:"index-header",
data() {
return {
list:[
{title:'首页'}
]
};
}
}
</script>
<style lang="scss">
@media (min-width:1440px) {
.head-box{
height: 62px;
.head-logo{
.logo{
// width: 120px;
height: 39px;
background: url(../../static/header/header-sprites15.png)no-repeat 0 0 ;
}
}
}
.head-nav{
view{
line-height: 62px;
}
.nav-logo{
height: 68px;
}
}
}
@media (max-width:1440px) {
.head-box{
height: 58px;
.head-logo{
.logo{
width: 120px;
height: 33px;
background: url(../../static/header/header-small-sprites3.png)no-repeat 0 0 ;
}
}
.head-nav{
view{
line-height: 62px;
}
.nav-logo{
height: 58px;
}
}
}
}
.head-box{
background-color: pink;
width: 1200px;
margin: 0 auto;
.head-logo{
padding: 12px 13px;
float: left;
width: 136px;
}
.head-nav{
height: 100%;
display: flex;
padding: 0 10px;
font-size: 14px
;
view{
padding: 0 16px;
}
.nav-logo{
background: url(../../static/header/mfwzx.png)no-repeat center; background-size: 75px 30px;
width: 75px;
}
}
}
</style>
main.js 0 → 100644
浏览文件 @ aca947c0
import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
...App
})
app.$mount()
manifest.json 0 → 100644
浏览文件 @ aca947c0
{
"name" : "q",
"appid" : "",
"description" : "",
"versionName" : "1.0.0",
"versionCode" : "100",
"transformPx" : false,
/* 5+App特有相关 */
"app-plus" : {
"usingComponents" : true,
"nvueStyleCompiler" : "uni-app",
"compilerVersion" : 3,
"splashscreen" : {
"alwaysShowBeforeRender" : true,
"waiting" : true,
"autoclose" : true,
"delay" : 0
},
/* 模块配置 */
"modules" : {},
/* 应用发布信息 */
"distribute" : {
/* android打包配置 */
"android" : {
"permissions" : [
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
"<uses-feature android:name=\"android.hardware.camera\"/>",
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
]
},
/* ios打包配置 */
"ios" : {},
/* SDK配置 */
"sdkConfigs" : {}
}
},
/* 快应用特有相关 */
"quickapp" : {},
/* 小程序特有相关 */
"mp-weixin" : {
"appid" : "",
"setting" : {
"urlCheck" : false
},
"usingComponents" : true
},
"mp-alipay" : {
"usingComponents" : true
},
"mp-baidu" : {
"usingComponents" : true
},
"mp-toutiao" : {
"usingComponents" : true
},
"uniStatistics": {
"enable": false
}
}
pages.json 0 → 100644
浏览文件 @ aca947c0
{
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "q-trip",
//#ifdef H5
"navigationStyle":"custom",
//#endif
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
}
}
pages/index/index.vue 0 → 100644
浏览文件 @ aca947c0
<template>
<view class="">
<indexHeader></indexHeader>
<indexBanner></indexBanner>
<indexBody></indexBody>
</view>
</template>
<script>
import indexHeader from '@/components/index/header.vue'
import indexBanner from '@/components/index/banner.vue'
import indexBody from '@/components/index/body.vue'
export default {
data() {
return {
title: 'Hello',
headLunbo:[
]
}
},
onLoad() {
},
methods: {
},
components:{
indexHeader,
indexBanner,
indexBody
}
}
</script>
<style>
</style>
uni.scss 0 → 100644
浏览文件 @ aca947c0
/**
* 这里是uni-app内置的常用样式变量
*
* uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
* 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
*
*/
/**
* 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
*
* 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
*/
/* 颜色变量 */
/* 行为相关颜色 */
$uni-color-primary: #007aff;
$uni-color-success: #4cd964;
$uni-color-warning: #f0ad4e;
$uni-color-error: #dd524d;
/* 文字基本颜色 */
$uni-text-color:#333;//基本色
$uni-text-color-inverse:#fff;//反色
$uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
$uni-text-color-placeholder: #808080;
$uni-text-color-disable:#c0c0c0;
/* 背景颜色 */
$uni-bg-color:#ffffff;
$uni-bg-color-grey:#f8f8f8;
$uni-bg-color-hover:#f1f1f1;//点击状态颜色
$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
/* 边框颜色 */
$uni-border-color:#c8c7cc;
/* 尺寸变量 */
/* 文字尺寸 */
$uni-font-size-sm:24rpx;
$uni-font-size-base:28rpx;
$uni-font-size-lg:32rpx;
/* 图片尺寸 */
$uni-img-size-sm:40rpx;
$uni-img-size-base:52rpx;
$uni-img-size-lg:80rpx;
/* Border Radius */
$uni-border-radius-sm: 4rpx;
$uni-border-radius-base: 6rpx;
$uni-border-radius-lg: 12rpx;
$uni-border-radius-circle: 50%;
/* 水平间距 */
$uni-spacing-row-sm: 10px;
$uni-spacing-row-base: 20rpx;
$uni-spacing-row-lg: 30rpx;
/* 垂直间距 */
$uni-spacing-col-sm: 8rpx;
$uni-spacing-col-base: 16rpx;
$uni-spacing-col-lg: 24rpx;
/* 透明度 */
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度
/* 文章场景相关 */
$uni-color-title: #2C405A; // 文章标题颜色
$uni-font-size-title:40rpx;
$uni-color-subtitle: #555555; // 二级标题颜色
$uni-font-size-subtitle:36rpx;
$uni-color-paragraph: #3F536E; // 文章段落颜色
$uni-font-size-paragraph:30rpx;
\ No newline at end of file
uni_modules/uni-swiper-dot/changelog.md 0 → 100644
浏览文件 @ aca947c0
## 1.0.6（2021-05-12）
- 新增 示例地址
- 修复 示例项目缺少组件的Bug
## 1.0.5（2021-02-05）
- 调整为uni_modules目录规范
- 新增 clickItem 事件，支持指示点控制轮播
- 新增 支持 pc 可用
uni_modules/uni-swiper-dot/components/uni-swiper-dot/uni-swiper-dot.vue 0 → 100644
浏览文件 @ aca947c0
<template>
<view class="uni-swiper__warp">
<slot />
<view v-if="mode === 'default'" :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box" key='default'>
<view v-for="(item,index) in info" @click="clickItem(index)" :style="{
'width': (index === current? dots.width*2:dots.width ) + 'px','height':dots.width/3 +'px' ,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border-radius':'0px'}"
:key="index" class="uni-swiper__dots-item uni-swiper__dots-bar" />
</view>
<view v-if="mode === 'dot'" :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box" key='dot'>
<view v-for="(item,index) in info" @click="clickItem(index)" :style="{
'width': dots.width + 'px','height':dots.height +'px' ,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border':index !==current ? dots.border:dots.selectedBorder}"
:key="index" class="uni-swiper__dots-item" />
</view>
<view v-if="mode === 'round'" :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box" key='round'>
<view v-for="(item,index) in info" @click="clickItem(index)" :class="[index === current&&'uni-swiper__dots-long']" :style="{
'width':(index === current? dots.width*3:dots.width ) + 'px','height':dots.height +'px' ,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border':index !==current ? dots.border:dots.selectedBorder}"
:key="index" class="uni-swiper__dots-item " />
</view>
<view v-if="mode === 'nav'" key='nav' :style="{'background-color':dotsStyles.backgroundColor,'bottom':'0'}" class="uni-swiper__dots-box uni-swiper__dots-nav">
<text :style="{'color':dotsStyles.color}" class="uni-swiper__dots-nav-item">{{ (current+1)+"/"+info.length +' ' +info[current][field] }}</text>
</view>
<view v-if="mode === 'indexes'" key='indexes' :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box">
<view v-for="(item,index) in info" @click="clickItem(index)" :style="{
'width':dots.width + 'px','height':dots.height +'px' ,'color':index === current?dots.selectedColor:dots.color,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border':index !==current ? dots.border:dots.selectedBorder}"
:key="index" class="uni-swiper__dots-item uni-swiper__dots-indexes"><text class="uni-swiper__dots-indexes-text">{{ index+1 }}</text></view>
</view>
</view>
</template>
<script>
/**
* SwiperDod 轮播图指示点
* @description 自定义轮播图指示点
* @tutorial https://ext.dcloud.net.cn/plugin?id=284
* @property {Number} current 当前指示点索引，必须是通过 `swiper` 的 `change` 事件获取到的 `e.detail.current`
* @property {String} mode = [default|round|nav|indexes] 指示点的类型
* @value defualt 默认指示点
* @value round 圆形指示点
* @value nav 条形指示点
* @value indexes 索引指示点
* @property {String} field mode 为 nav 时，显示的内容字段（mode = nav 时必填）
* @property {String} info 轮播图的数据，通过数组长度决定指示点个数
* @property {Object} dotsStyles 指示点样式
* @event {Function} clickItem 组件触发点击事件时触发，e={currentIndex}
*/
export default {
name: 'UniSwiperDot',
props: {
info: {
type: Array,
default () {
return []
}
},
current: {
type: Number,
default: 0
},
dotsStyles: {
type: Object,
default () {
return {}
}
},
// 类型 ：default(默认) indexes long nav
mode: {
type: String,
default: 'default'
},
// 只在 nav 模式下生效，变量名称
field: {
type: String,
default: ''
}
},
data() {
return {
dots: {
width: 8,
height: 8,
bottom: 10,
color: '#fff',
backgroundColor: 'rgba(0, 0, 0, .3)',
border: '1px rgba(0, 0, 0, .3) solid',
selectedBackgroundColor: '#333',
selectedBorder: '1px rgba(0, 0, 0, .9) solid'
}
}
},
watch: {
dotsStyles(newVal) {
this.dots = Object.assign(this.dots, this.dotsStyles)
},
mode(newVal) {
if (newVal === 'indexes') {
this.dots.width = 20
this.dots.height = 20
} else {
this.dots.width = 8
this.dots.height = 8
}
}
},
created() {
if (this.mode === 'indexes') {
this.dots.width = 20
this.dots.height = 20
}
this.dots = Object.assign(this.dots, this.dotsStyles)
},
methods: {
clickItem(index) {
this.$emit('clickItem', index)
}
}
}
</script>
<style lang="scss" scoped>
.uni-swiper__warp {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex: 1;
flex-direction: column;
position: relative;
overflow: hidden;
}
.uni-swiper__dots-box {
position: absolute;
bottom: 10px;
left: 0;
right: 0;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex: 1;
flex-direction: row;
justify-content: center;
align-items: center;
}
.uni-swiper__dots-item {
width: 8px;
border-radius: 100px;
margin-left: 6px;
background-color: $uni-bg-color-mask;
/* #ifndef APP-NVUE */
cursor: pointer;
/* #endif */
/* #ifdef H5 */
// border-width: 5px 0;
// border-style: solid;
// border-color: transparent;
// background-clip: padding-box;
/* #endif */
// transition: width 0.2s linear; 不要取消注释，不然会不能变色
}
.uni-swiper__dots-item:first-child {
margin: 0;
}
.uni-swiper__dots-default {
border-radius: 100px;
}
.uni-swiper__dots-long {
border-radius: 50px;
}
.uni-swiper__dots-bar {
border-radius: 50px;
}
.uni-swiper__dots-nav {
bottom: 0px;
height: 40px;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex: 1;
flex-direction: row;
justify-content: flex-start;
align-items: center;
background-color: rgba(0, 0, 0, 0.2);
}
.uni-swiper__dots-nav-item {
/* overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; */
font-size: $uni-font-size-base;
color: #fff;
margin: 0 15px;
}
.uni-swiper__dots-indexes {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
// flex: 1;
justify-content: center;
align-items: center;
}
.uni-swiper__dots-indexes-text {
color: #fff;
font-size: $uni-font-size-sm;
}
</style>
uni_modules/uni-swiper-dot/package.json 0 → 100644
浏览文件 @ aca947c0
{
"id": "uni-swiper-dot",
"displayName": "uni-swiper-dot 轮播图指示点",
"version": "1.0.6",
"description": "自定义轮播图指示点组件",
"keywords": [
"uni-ui",
"uniui",
"轮播图指示点",
"dot",
"swiper"
],
"repository": "https://github.com/dcloudio/uni-ui",
"engines": {
"HBuilderX": ""
},
"directories": {
"example": "../../temps/example_temps"
},
"dcloudext": {
"category": [
"前端组件",
"通用组件"
],
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
},
"uni_modules": {
"dependencies": [],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"App": {
"app-vue": "y",
"app-nvue": "y"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y"
},
"快应用": {
"华为": "u",
"联盟": "u"
}
}
}
}
}
\ No newline at end of file
uni_modules/uni-swiper-dot/readme.md 0 → 100644
浏览文件 @ aca947c0
## SwiperDot 轮播图指示点
> **组件名：uni-swiper-dot**
> 代码块： `uSwiperDot`
自定义轮播图指示点
> **注意事项**
> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。
> - 本组件依赖 `swiper` 组件,请与`swiper`组件配合使用
> - `width` 与 `height` 如非必要，请勿设置过大，或者过小
> - `swiper-item` 尽量控制在一定数量之内，否则指示点可能会超出屏幕
> - 暂不支持垂直方向的指示点
### 安装方式
本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范，`HBuilderX 2.5.5`起，只需将本组件导入项目，在页面`template`中即可直接使用，无需在页面中`import`和注册`components`。
如需通过`npm`方式使用`uni-ui`组件，另见文档：[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55)
### 基本用法
在 ``template`` 中的使用
```html
<uni-swiper-dot :info="info" :current="current" field="content" :mode="mode">
<swiper class="swiper-box" @change="change">
<swiper-item v-for="(item ,index) in info" :key="index">
<view class="swiper-item">
{{item.content}}
</view>
</swiper-item>
</swiper>
</uni-swiper-dot>
```
```javascript
export default {
data() {
return {
info: [{
content: '内容 A'
}, {
content: '内容 B'
}, {
content: '内容 C'
}],
current: 0,
mode: 'round',
}
},
methods: {
change(e) {
this.current = e.detail.current;
}
}
}
```
## API
### SwiperDod Props
|属性名 |类型 |默认值 |说明 |
|:-: |:-: |:-: |:-: |
|current |Number |0 |当前指示点索引，必须是通过 `swiper` 的 `change` 事件获取到的 `e.detail.current`|
|mode |String |default|指示点的类型，可选值：default 、round 、nav 、 indexes |
|field |String |- | mode 为 nav 时，显示的内容字段（mode = nav 时必填） |
|info |Array |- |轮播图的数据，通过数组长度决定指示点个数 |
|dotsStyles |Object |- |指示点样式 |
#### dotsStyles Options
|属性名 |类型 |默认值 |说明 |
|:-: |:-: |:-: |:-: |
|width |Number | 8 |指示点宽度 **在 mode = nav、mode = indexes 时不生效** |
|bottom |Number | 10 |指示点距 `swiper` 底部的高度 |
|color |Color | '#fff' |指示点前景色，**只在 mode = nav ，mode = indexes 时生效** |
|backgroundColor |Color | 'rgba(0, 0, 0, .3)' |未选择指示点背景色 |
|border |Border | '1px rgba(0, 0, 0, .3) solid' |未选择指示点边框样式 |
|selectedBackgroundColor|Color | '#333' |已选择指示点背景色，**在 mode = nav 时不生效** |
|selectedBorder |Border | '1px rgba(0, 0, 0, .9) solid' |已选择指示点边框样式，**在 mode = nav 时不生效** |
## 组件示例
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/swiper-dot/swiper-dot](https://hellouniapp.dcloud.net.cn/pages/extUI/swiper-dot/swiper-dot)
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或