AnHanTech
97
member/homepage/homepage.vue
Normal file
97
member/homepage/homepage.vue
Normal file
@@ -0,0 +1,97 @@
|
||||
<template>
|
||||
<view>
|
||||
<uni-nav-bar shadow left-icon="left" fixed rightIcon="more-filled" rightText="编辑" title="他/她的主页"
|
||||
backgroundColor="transparent" />
|
||||
|
||||
<uni-swiper-dot class="uni-swiper-dot-box" :info="info" :current="current" mode="round" field="content">
|
||||
<swiper class="swiper-box" :current="swiperDotIndex">
|
||||
<swiper-item v-for="(item, index) in info" :key="index">
|
||||
<view class="swiper-item" :class="'swiper-item' + index">
|
||||
<image :src="item.url" mode="widthFix" alt=""></image>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</uni-swiper-dot>
|
||||
<uni-section class="mb-10" title="昵称">
|
||||
</uni-section>
|
||||
<uni-section class="mb-10" title="最新动态">
|
||||
<template v-slot:right>
|
||||
<uni-icons type="right"></uni-icons>
|
||||
</template>
|
||||
</uni-section>
|
||||
<uni-section class="mb-10" title="认证信息">
|
||||
<template v-slot:right>
|
||||
<uni-icons type="right"></uni-icons>
|
||||
</template>
|
||||
</uni-section>
|
||||
<uni-section class="mb-10" title="个人资料">
|
||||
<template v-slot:right>
|
||||
<uni-icons type="right"></uni-icons>
|
||||
</template>
|
||||
</uni-section>
|
||||
<uni-section class="mb-10" title="我想说的话">
|
||||
<template v-slot:right>
|
||||
<uni-icons type="right"></uni-icons>
|
||||
</template>
|
||||
</uni-section>
|
||||
<uni-section class="mb-10" title="我的标签">
|
||||
<template v-slot:right>
|
||||
<uni-icons type="right"></uni-icons>
|
||||
</template>
|
||||
</uni-section>
|
||||
<uni-section class="mb-10" title="贵族">
|
||||
<template v-slot:right>
|
||||
<uni-icons type="right"></uni-icons>
|
||||
</template>
|
||||
</uni-section>
|
||||
|
||||
<uni-goods-nav :fill="true" :options="options" :button-group="buttonGroup" style="margin-top: 20px;" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
current: 0,
|
||||
swiperDotIndex: 0,
|
||||
info: [{
|
||||
colorClass: 'uni-bg-red',
|
||||
url: 'https://web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
|
||||
content: '内容 A'
|
||||
},
|
||||
{
|
||||
colorClass: 'uni-bg-green',
|
||||
url: 'https://web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
|
||||
content: '内容 B'
|
||||
},
|
||||
{
|
||||
colorClass: 'uni-bg-blue',
|
||||
url: 'https://web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
|
||||
content: '内容 C'
|
||||
}
|
||||
],
|
||||
options: [{
|
||||
icon: 'chat',
|
||||
text: '私信',
|
||||
}, {
|
||||
icon: 'star',
|
||||
text: '关注',
|
||||
}],
|
||||
buttonGroup: [{
|
||||
text: '撩一下TA',
|
||||
backgroundColor: 'linear-gradient(90deg, #ff55ff, #ff557f)',
|
||||
color: '#fff'
|
||||
}
|
||||
],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@@ -1,73 +1,81 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="example">
|
||||
<!-- 基础表单校验 -->
|
||||
<uni-forms ref="valiForm" :rules="rules" :modelValue="formData">
|
||||
<view class="container">
|
||||
<uni-nav-bar shadow left-icon="left" fixed leftText="返回" dark rightIcon="compose" rightText="编辑" title="个人资料"/>
|
||||
<view class="example">
|
||||
<!-- 基础表单校验 -->
|
||||
<uni-forms ref="valiForm" :rules="rules" :modelValue="formData">
|
||||
|
||||
<uni-forms-item label="签名">
|
||||
<uni-easyinput type="textarea" :disabled="isDisabled" v-model="formData.introduction" placeholder="请输入自我介绍" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="昵称" name="name">
|
||||
<uni-easyinput v-model="formData.name" placeholder="请输入姓名" :disabled="isDisabled"/>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="性别">
|
||||
<uni-data-checkbox v-model="formData.sex" :localdata="sexs" :disabled="isDisabled" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="生日">
|
||||
<uni-datetime-picker type="date" return-type="timestamp" v-model="formData.datetimesingle" :disabled="isDisabled" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="身高" name="name">
|
||||
<uni-easyinput v-model="formData.name" type="number" placeholder="请输入姓名" :disabled="isDisabled"/>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="签名">
|
||||
<uni-easyinput type="textarea" :disabled="isDisabled" v-model="formData.introduction"
|
||||
placeholder="请输入自我介绍" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="昵称" name="name">
|
||||
<uni-easyinput v-model="formData.name" placeholder="请输入姓名" :disabled="isDisabled" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="性别">
|
||||
<uni-data-checkbox v-model="formData.sex" :localdata="sexs" :disabled="isDisabled" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="生日">
|
||||
<uni-datetime-picker type="date" return-type="timestamp" v-model="formData.datetimesingle"
|
||||
:disabled="isDisabled" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="身高" name="name">
|
||||
<uni-easyinput v-model="formData.name" type="number" placeholder="请输入姓名" :disabled="isDisabled" />
|
||||
</uni-forms-item>
|
||||
|
||||
<uni-forms-item label="所在地">
|
||||
<uni-data-picker popup-title="请选择班级" :readonly="isDisabled"></uni-data-picker>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="学历">
|
||||
<uni-data-select v-model="formData.hobby" :localdata="educations" :disabled="isDisabled"></uni-data-select>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="职业">
|
||||
<uni-data-picker popup-title="请选择班级" :readonly="isDisabled"></uni-data-picker>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="企业">
|
||||
<uni-easyinput v-model="formData.name" type="number" placeholder="请输入姓名" :disabled="isDisabled" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="家乡">
|
||||
<uni-data-picker popup-title="请选择班级" :readonly="isDisabled"></uni-data-picker>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="自我介绍" name="introduction">
|
||||
<uni-easyinput type="textarea" v-model="formData.introduction" placeholder="请输入自我介绍" :disabled="isDisabled" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="所在地">
|
||||
<uni-data-picker popup-title="请选择班级" :readonly="isDisabled"></uni-data-picker>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="学历">
|
||||
<uni-data-select v-model="formData.hobby" :localdata="educations" :disabled="isDisabled">
|
||||
</uni-data-select>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="职业">
|
||||
<uni-data-picker popup-title="请选择班级" :readonly="isDisabled"></uni-data-picker>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="企业">
|
||||
<uni-easyinput v-model="formData.name" type="number" placeholder="请输入姓名" :disabled="isDisabled" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="家乡">
|
||||
<uni-data-picker popup-title="请选择班级" :readonly="isDisabled"></uni-data-picker>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="自我介绍" name="introduction">
|
||||
<uni-easyinput type="textarea" v-model="formData.introduction" placeholder="请输入自我介绍"
|
||||
:disabled="isDisabled" />
|
||||
</uni-forms-item>
|
||||
|
||||
|
||||
<uni-forms-item label="月收入">
|
||||
<uni-data-select v-model="formData.hobby" :localdata="educations" :disabled="isDisabled"></uni-data-select>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="婚姻">
|
||||
<uni-data-select v-model="formData.hobby" :localdata="educations" :disabled="isDisabled"></uni-data-select>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="房产">
|
||||
<uni-data-picker popup-title="请选择班级" :readonly="isDisabled"></uni-data-picker>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="月收入">
|
||||
<uni-data-select v-model="formData.hobby" :localdata="educations" :disabled="isDisabled">
|
||||
</uni-data-select>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="婚姻">
|
||||
<uni-data-select v-model="formData.hobby" :localdata="educations" :disabled="isDisabled">
|
||||
</uni-data-select>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="房产">
|
||||
<uni-data-picker popup-title="请选择班级" :readonly="isDisabled"></uni-data-picker>
|
||||
</uni-forms-item>
|
||||
|
||||
|
||||
|
||||
<uni-forms-item label="所在地">
|
||||
<uni-data-picker popup-title="请选择班级" :readonly="isDisabled"></uni-data-picker>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="年龄">
|
||||
<uni-data-picker popup-title="请选择班级" :readonly="isDisabled"></uni-data-picker>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="身高">
|
||||
<uni-data-picker popup-title="请选择班级" :readonly="isDisabled"></uni-data-picker>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="学历">
|
||||
<uni-data-select v-model="formData.hobby" :localdata="educations" :disabled="isDisabled"></uni-data-select>
|
||||
</uni-forms-item>
|
||||
</uni-forms>
|
||||
<button type="primary" @click="submit('valiForm')">提交</button>
|
||||
</view>
|
||||
|
||||
<uni-forms-item label="所在地">
|
||||
<uni-data-picker popup-title="请选择班级" :readonly="isDisabled"></uni-data-picker>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="年龄">
|
||||
<uni-data-picker popup-title="请选择班级" :readonly="isDisabled"></uni-data-picker>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="身高">
|
||||
<uni-data-picker popup-title="请选择班级" :readonly="isDisabled"></uni-data-picker>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="学历">
|
||||
<uni-data-select v-model="formData.hobby" :localdata="educations" :disabled="isDisabled">
|
||||
</uni-data-select>
|
||||
</uni-forms-item>
|
||||
</uni-forms>
|
||||
<button type="primary" @click="submit('valiForm')">提交</button>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
</view>
|
||||
@@ -76,7 +84,7 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isDisabled:true,
|
||||
isDisabled: true,
|
||||
// 基础表单数据
|
||||
formData: {
|
||||
name: '',
|
||||
@@ -221,9 +229,10 @@
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.container{
|
||||
.container {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.example {
|
||||
padding: 15px;
|
||||
background-color: #fff;
|
||||
|
||||
77
pages.json
77
pages.json
@@ -22,40 +22,49 @@
|
||||
"enablePullDownRefresh": false,
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}
|
||||
,{
|
||||
"path" : "pages/login/login",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
}
|
||||
],
|
||||
"subPackages": [
|
||||
{
|
||||
"root": "member",
|
||||
"pages": [
|
||||
|
||||
{
|
||||
"path" : "profile/profile",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText": "个人资料",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
}
|
||||
]
|
||||
}, {
|
||||
"path": "pages/login/login",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
}
|
||||
],
|
||||
"subPackages": [{
|
||||
"root": "member",
|
||||
"pages": [{
|
||||
"path": "profile/profile",
|
||||
"style": {
|
||||
"navigationBarTitleText": "个人资料",
|
||||
"enablePullDownRefresh": false,
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}, {
|
||||
"path": "homepage/homepage",
|
||||
"style": {
|
||||
"navigationBarTitleText": "个人主页",
|
||||
"enablePullDownRefresh": false,
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}]
|
||||
}],
|
||||
"tabBar": {
|
||||
"list": [{
|
||||
"pagePath": "pages/tabbar/home/home",
|
||||
"text": "主页",
|
||||
"selectedIconPath": "static/tabbar/home_active.png",
|
||||
"iconPath": "static/tabbar/home.png"
|
||||
},{
|
||||
"pagePath": "pages/tabbar/home/home",
|
||||
"text": "动态",
|
||||
"selectedIconPath": "static/tabbar/home_active.png",
|
||||
"iconPath": "static/tabbar/home.png"
|
||||
},{
|
||||
"pagePath": "pages/tabbar/home/home",
|
||||
"text": "消息",
|
||||
"selectedIconPath": "static/tabbar/home_active.png",
|
||||
"iconPath": "static/tabbar/home.png"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/tabbar/my/my",
|
||||
@@ -75,19 +84,17 @@
|
||||
"rpxCalcMaxDeviceWidth": 960,
|
||||
"rpxCalcBaseDeviceWidth": 375,
|
||||
"rpxCalcIncludeWidth": 750,
|
||||
"scrollIndicator":"none",
|
||||
"app-plus":{
|
||||
|
||||
"scrollIndicator": "none",
|
||||
"app-plus": {
|
||||
|
||||
}
|
||||
},
|
||||
"uniIdRouter": {},
|
||||
"condition": {
|
||||
"current": 0,
|
||||
"list": [
|
||||
{
|
||||
"name": "login",
|
||||
"path": "pages/login/login"
|
||||
}
|
||||
]
|
||||
"list": [{
|
||||
"name": "login",
|
||||
"path": "pages/login/login"
|
||||
}]
|
||||
}
|
||||
}
|
||||
|
||||
@@ -16,25 +16,25 @@
|
||||
<view class="Grid-Item">
|
||||
<view class="Grid-Item-1">
|
||||
<image class="GSimg" src="../../../static/logo.png"></image>
|
||||
<view class="GStitle">测试功能</view>
|
||||
<view class="GStitle">家族</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="Grid-Item">
|
||||
<view class="Grid-Item-1">
|
||||
<image class="GSimg" src="../../../static/logo.png"></image>
|
||||
<view class="GStitle">测试功能</view>
|
||||
<view class="GStitle">任务</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="Grid-Item">
|
||||
<view class="Grid-Item-1">
|
||||
<image class="GSimg" src="../../../static/logo.png"></image>
|
||||
<view class="GStitle">测试功能</view>
|
||||
<view class="GStitle">收益</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="Grid-Item">
|
||||
<view class="Grid-Item-1">
|
||||
<image class="GSimg" src="../../../static/logo.png"></image>
|
||||
<view class="GStitle">测试功能</view>
|
||||
<view class="GStitle">充值</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
18
uni_modules/uni-goods-nav/changelog.md
Normal file
18
uni_modules/uni-goods-nav/changelog.md
Normal file
@@ -0,0 +1,18 @@
|
||||
## 1.2.1（2022-05-30）
|
||||
- 新增 stat属性，是否开启uni统计功能
|
||||
## 1.2.0（2021-11-19）
|
||||
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
|
||||
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-goods-nav](https://uniapp.dcloud.io/component/uniui/uni-goods-nav)
|
||||
## 1.1.1（2021-08-24）
|
||||
- 新增 支持国际化
|
||||
## 1.1.0（2021-07-13）
|
||||
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
|
||||
## 1.0.7（2021-05-12）
|
||||
- 新增 组件示例地址
|
||||
## 1.0.6（2021-04-21）
|
||||
- 优化 添加依赖 uni-icons, 导入后自动下载依赖
|
||||
## 1.0.5（2021-02-05）
|
||||
- 优化 组件引用关系，通过uni_modules引用组件
|
||||
|
||||
## 1.0.4（2021-02-05）
|
||||
- 调整为uni_modules目录规范
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"uni-goods-nav.options.shop": "shop",
|
||||
"uni-goods-nav.options.cart": "cart",
|
||||
"uni-goods-nav.buttonGroup.addToCart": "add to cart",
|
||||
"uni-goods-nav.buttonGroup.buyNow": "buy now"
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
import en from './en.json'
|
||||
import zhHans from './zh-Hans.json'
|
||||
import zhHant from './zh-Hant.json'
|
||||
export default {
|
||||
en,
|
||||
'zh-Hans': zhHans,
|
||||
'zh-Hant': zhHant
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"uni-goods-nav.options.shop": "店铺",
|
||||
"uni-goods-nav.options.cart": "购物车",
|
||||
"uni-goods-nav.buttonGroup.addToCart": "加入购物车",
|
||||
"uni-goods-nav.buttonGroup.buyNow": "立即购买"
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"uni-goods-nav.options.shop": "店鋪",
|
||||
"uni-goods-nav.options.cart": "購物車",
|
||||
"uni-goods-nav.buttonGroup.addToCart": "加入購物車",
|
||||
"uni-goods-nav.buttonGroup.buyNow": "立即購買"
|
||||
}
|
||||
@@ -0,0 +1,229 @@
|
||||
<template>
|
||||
<view class="uni-goods-nav">
|
||||
<!-- 底部占位 -->
|
||||
<view class="uni-tab__seat" />
|
||||
<view class="uni-tab__cart-box flex">
|
||||
<view class="flex uni-tab__cart-sub-left">
|
||||
<view v-for="(item,index) in options" :key="index" class="flex uni-tab__cart-button-left uni-tab__shop-cart" @click="onClick(index,item)">
|
||||
<view class="uni-tab__icon">
|
||||
<uni-icons :type="item.icon" size="20" color="#646566"></uni-icons>
|
||||
<!-- <image class="image" :src="item.icon" mode="widthFix" /> -->
|
||||
</view>
|
||||
<text class="uni-tab__text">{{ item.text }}</text>
|
||||
<view class="flex uni-tab__dot-box">
|
||||
<text v-if="item.info" :class="{ 'uni-tab__dots': item.info > 9 }" class="uni-tab__dot " :style="{'backgroundColor':item.infoBackgroundColor?item.infoBackgroundColor:'#ff0000',
|
||||
color:item.infoColor?item.infoColor:'#fff'
|
||||
}">{{ item.info }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view :class="{'uni-tab__right':fill}" class="flex uni-tab__cart-sub-right ">
|
||||
<view v-for="(item,index) in buttonGroup" :key="index" :style="{background:item.backgroundColor,color:item.color}"
|
||||
class="flex uni-tab__cart-button-right" @click="buttonClick(index,item)"><text :style="{color:item.color}" class="uni-tab__cart-button-right-text">{{ item.text }}</text></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
initVueI18n
|
||||
} from '@dcloudio/uni-i18n'
|
||||
import messages from './i18n/index.js'
|
||||
const { t } = initVueI18n(messages)
|
||||
/**
|
||||
* GoodsNav 商品导航
|
||||
* @description 商品加入购物车、立即购买等
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=865
|
||||
* @property {Array} options 组件参数
|
||||
* @property {Array} buttonGroup 组件按钮组参数
|
||||
* @property {Boolean} fill = [true | false] 组件按钮组参数
|
||||
* @property {Boolean} stat 是否开启统计功能
|
||||
* @event {Function} click 左侧点击事件
|
||||
* @event {Function} buttonClick 右侧按钮组点击事件
|
||||
* @example <uni-goods-nav :fill="true" options="" buttonGroup="buttonGroup" @click="" @buttonClick="" />
|
||||
*/
|
||||
export default {
|
||||
name: 'UniGoodsNav',
|
||||
emits:['click','buttonClick'],
|
||||
props: {
|
||||
options: {
|
||||
type: Array,
|
||||
default () {
|
||||
return [{
|
||||
icon: 'shop',
|
||||
text: t("uni-goods-nav.options.shop"),
|
||||
}, {
|
||||
icon: 'cart',
|
||||
text: t("uni-goods-nav.options.cart")
|
||||
}]
|
||||
}
|
||||
},
|
||||
buttonGroup: {
|
||||
type: Array,
|
||||
default () {
|
||||
return [{
|
||||
text: t("uni-goods-nav.buttonGroup.addToCart"),
|
||||
backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
|
||||
color: '#fff'
|
||||
},
|
||||
{
|
||||
text: t("uni-goods-nav.buttonGroup.buyNow"),
|
||||
backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
|
||||
color: '#fff'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
fill: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
stat:{
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onClick(index, item) {
|
||||
this.$emit('click', {
|
||||
index,
|
||||
content: item,
|
||||
})
|
||||
},
|
||||
buttonClick(index, item) {
|
||||
if (uni.report && this.stat) {
|
||||
uni.report(item.text, item.text)
|
||||
}
|
||||
this.$emit('buttonClick', {
|
||||
index,
|
||||
content: item
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" >
|
||||
.flex {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.uni-goods-nav {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.uni-tab__cart-box {
|
||||
flex: 1;
|
||||
height: 50px;
|
||||
background-color: #fff;
|
||||
z-index: 900;
|
||||
}
|
||||
|
||||
.uni-tab__cart-sub-left {
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.uni-tab__cart-sub-right {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.uni-tab__right {
|
||||
margin: 5px 0;
|
||||
margin-right: 10px;
|
||||
border-radius: 100px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.uni-tab__cart-button-left {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
// flex: 1;
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
margin: 0 10px;
|
||||
/* #ifdef H5 */
|
||||
cursor: pointer;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.uni-tab__icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.uni-tab__text {
|
||||
margin-top: 3px;
|
||||
font-size: 12px;
|
||||
color: #646566;
|
||||
}
|
||||
|
||||
.uni-tab__cart-button-right {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* #endif */
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
/* #ifdef H5 */
|
||||
cursor: pointer;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.uni-tab__cart-button-right-text {
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.uni-tab__cart-button-right:active {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.uni-tab__dot-box {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* #endif */
|
||||
position: absolute;
|
||||
right: -2px;
|
||||
top: 2px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
// width: 0;
|
||||
// height: 0;
|
||||
}
|
||||
|
||||
.uni-tab__dot {
|
||||
// width: 30rpx;
|
||||
// height: 30rpx;
|
||||
padding: 0 4px;
|
||||
line-height: 15px;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
background-color: #ff0000;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.uni-tab__dots {
|
||||
padding: 0 4px;
|
||||
// width: auto;
|
||||
border-radius: 15px;
|
||||
}
|
||||
</style>
|
||||
88
uni_modules/uni-goods-nav/package.json
Normal file
88
uni_modules/uni-goods-nav/package.json
Normal file
@@ -0,0 +1,88 @@
|
||||
{
|
||||
"id": "uni-goods-nav",
|
||||
"displayName": "uni-goods-nav 商品导航",
|
||||
"version": "1.2.1",
|
||||
"description": "商品导航组件主要用于电商类应用底部导航，可自定义加入购物车，购买等操作",
|
||||
"keywords": [
|
||||
"uni-ui",
|
||||
"uniui",
|
||||
"商品导航"
|
||||
],
|
||||
"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": [
|
||||
"uni-scss",
|
||||
"uni-icons"
|
||||
],
|
||||
"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"
|
||||
},
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
10
uni_modules/uni-goods-nav/readme.md
Normal file
10
uni_modules/uni-goods-nav/readme.md
Normal file
@@ -0,0 +1,10 @@
|
||||
|
||||
|
||||
## GoodsNav 商品导航
|
||||
> **组件名：uni-goods-nav**
|
||||
> 代码块： `uGoodsNav`
|
||||
|
||||
商品加入购物车，立即购买等。
|
||||
|
||||
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-goods-nav)
|
||||
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
|
||||
47
uni_modules/uni-nav-bar/changelog.md
Normal file
47
uni_modules/uni-nav-bar/changelog.md
Normal file
@@ -0,0 +1,47 @@
|
||||
## 1.3.9（2022-10-13）
|
||||
- 修复 条件编译错误的bug
|
||||
## 1.3.8（2022-10-12）
|
||||
- 修复 nvue 环境 fixed 为 true 的情况下，无法置顶的 bug
|
||||
## 1.3.7（2022-08-11）
|
||||
- 修复 nvue 环境下 fixed 为 true 的情况下，无法置顶的 bug
|
||||
## 1.3.6（2022-06-30）
|
||||
- 修复 组件示例中插槽用法无法显示内容的bug
|
||||
## 1.3.5（2022-05-24）
|
||||
- 新增 stat 属性 ，可开启统计title 上报 ，仅使用了title 属性且项目开启了uni统计生效
|
||||
## 1.3.4（2022-01-24）
|
||||
- 更新 组件示例
|
||||
## 1.3.3（2022-01-24）
|
||||
- 新增 left-width/right-width属性 ，可修改左右两侧的宽度
|
||||
## 1.3.2（2022-01-18）
|
||||
- 修复 在vue下，标题不垂直居中的bug
|
||||
## 1.3.1（2022-01-18）
|
||||
- 修复 height 属性类型错误
|
||||
## 1.3.0（2022-01-18）
|
||||
- 新增 height 属性,可修改组件高度
|
||||
- 新增 dark 属性可可开启暗黑模式
|
||||
- 优化 标题字数过多显示省略号
|
||||
- 优化 插槽，插入内容可完全覆盖
|
||||
## 1.2.1（2022-01-10）
|
||||
- 修复 color 属性不生效的bug
|
||||
## 1.2.0（2021-11-19）
|
||||
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
|
||||
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-nav-bar](https://uniapp.dcloud.io/component/uniui/uni-nav-bar)
|
||||
## 1.1.0（2021-07-30）
|
||||
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
|
||||
## 1.0.11（2021-05-12）
|
||||
- 新增 组件示例地址
|
||||
## 1.0.10（2021-04-30）
|
||||
- 修复 在nvue下fixed为true，宽度不能撑满的Bug
|
||||
## 1.0.9（2021-04-21）
|
||||
- 优化 添加依赖 uni-icons, 导入后自动下载依赖
|
||||
## 1.0.8（2021-04-14）
|
||||
- uni-ui 修复 uni-nav-bar 当 fixed 属性为 true 时铺不满屏幕的 bug
|
||||
|
||||
## 1.0.7（2021-02-25）
|
||||
- 修复 easycom 下，找不到 uni-status-bar 的bug
|
||||
|
||||
## 1.0.6（2021-02-05）
|
||||
- 优化 组件引用关系，通过uni_modules引用组件
|
||||
|
||||
## 1.0.5（2021-02-05）
|
||||
- 调整为uni_modules目录规范
|
||||
357
uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue
Normal file
357
uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue
Normal file
@@ -0,0 +1,357 @@
|
||||
<template>
|
||||
<view class="uni-navbar" :class="{'uni-dark':dark, 'uni-nvue-fixed': fixed}">
|
||||
<view class="uni-navbar__content" :class="{ 'uni-navbar--fixed': fixed, 'uni-navbar--shadow': shadow, 'uni-navbar--border': border }"
|
||||
:style="{ 'background-color': themeBgColor }" >
|
||||
<status-bar v-if="statusBar" />
|
||||
<view :style="{ color: themeColor,backgroundColor: themeBgColor ,height:navbarHeight}"
|
||||
class="uni-navbar__header">
|
||||
<view @tap="onClickLeft" class="uni-navbar__header-btns uni-navbar__header-btns-left"
|
||||
:style="{width:leftIconWidth}">
|
||||
<slot name="left">
|
||||
<view class="uni-navbar__content_view" v-if="leftIcon.length > 0">
|
||||
<uni-icons :color="themeColor" :type="leftIcon" size="20" />
|
||||
</view>
|
||||
<view :class="{ 'uni-navbar-btn-icon-left': !leftIcon.length > 0 }" class="uni-navbar-btn-text"
|
||||
v-if="leftText.length">
|
||||
<text :style="{ color: themeColor, fontSize: '12px' }">{{ leftText }}</text>
|
||||
</view>
|
||||
</slot>
|
||||
</view>
|
||||
<view class="uni-navbar__header-container " @tap="onClickTitle">
|
||||
<slot>
|
||||
<view class="uni-navbar__header-container-inner" v-if="title.length>0">
|
||||
<text class="uni-nav-bar-text uni-ellipsis-1"
|
||||
:style="{color: themeColor }">{{ title }}</text>
|
||||
</view>
|
||||
</slot>
|
||||
</view>
|
||||
<view @click="onClickRight" class="uni-navbar__header-btns uni-navbar__header-btns-right"
|
||||
:style="{width:rightIconWidth}">
|
||||
<slot name="right">
|
||||
<view v-if="rightIcon.length">
|
||||
<uni-icons :color="themeColor" :type="rightIcon" size="22" />
|
||||
</view>
|
||||
<view class="uni-navbar-btn-text" v-if="rightText.length && !rightIcon.length">
|
||||
<text class="uni-nav-bar-right-text" :style="{ color: themeColor}">{{ rightText }}</text>
|
||||
</view>
|
||||
</slot>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #ifndef APP-NVUE -->
|
||||
<view class="uni-navbar__placeholder" v-if="fixed">
|
||||
<status-bar v-if="statusBar" />
|
||||
<view class="uni-navbar__placeholder-view" :style="{ height:navbarHeight}" />
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import statusBar from "./uni-status-bar.vue";
|
||||
const getVal = (val) => typeof val === 'number' ? val + 'px' : val;
|
||||
|
||||
/**
|
||||
*
|
||||
*
|
||||
* NavBar 自定义导航栏
|
||||
* @description 导航栏组件，主要用于头部导航
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=52
|
||||
* @property {Boolean} dark 开启黑暗模式
|
||||
* @property {String} title 标题文字
|
||||
* @property {String} leftText 左侧按钮文本
|
||||
* @property {String} rightText 右侧按钮文本
|
||||
* @property {String} leftIcon 左侧按钮图标（图标类型参考 [Icon 图标](http://ext.dcloud.net.cn/plugin?id=28) type 属性）
|
||||
* @property {String} rightIcon 右侧按钮图标（图标类型参考 [Icon 图标](http://ext.dcloud.net.cn/plugin?id=28) type 属性）
|
||||
* @property {String} color 图标和文字颜色
|
||||
* @property {String} backgroundColor 导航栏背景颜色
|
||||
* @property {Boolean} fixed = [true|false] 是否固定顶部
|
||||
* @property {Boolean} statusBar = [true|false] 是否包含状态栏
|
||||
* @property {Boolean} shadow = [true|false] 导航栏下是否有阴影
|
||||
* @property {Boolean} stat 是否开启统计标题上报
|
||||
* @event {Function} clickLeft 左侧按钮点击时触发
|
||||
* @event {Function} clickRight 右侧按钮点击时触发
|
||||
* @event {Function} clickTitle 中间标题点击时触发
|
||||
*/
|
||||
export default {
|
||||
name: "UniNavBar",
|
||||
components: {
|
||||
statusBar
|
||||
},
|
||||
emits: ['clickLeft', 'clickRight', 'clickTitle'],
|
||||
props: {
|
||||
dark: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
leftText: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
rightText: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
leftIcon: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
rightIcon: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
fixed: {
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
statusBar: {
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
},
|
||||
shadow: {
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
},
|
||||
border: {
|
||||
type: [Boolean, String],
|
||||
default: true
|
||||
},
|
||||
height: {
|
||||
type: [Number, String],
|
||||
default: 44
|
||||
},
|
||||
leftWidth: {
|
||||
type: [Number, String],
|
||||
default: 60
|
||||
},
|
||||
rightWidth: {
|
||||
type: [Number, String],
|
||||
default: 60
|
||||
},
|
||||
stat: {
|
||||
type: [Boolean, String],
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
themeBgColor() {
|
||||
if (this.dark) {
|
||||
// 默认值
|
||||
if (this.backgroundColor) {
|
||||
return this.backgroundColor
|
||||
} else {
|
||||
return this.dark ? '#333' : '#FFF'
|
||||
}
|
||||
}
|
||||
return this.backgroundColor || '#FFF'
|
||||
},
|
||||
themeColor() {
|
||||
if (this.dark) {
|
||||
// 默认值
|
||||
if (this.color) {
|
||||
return this.color
|
||||
} else {
|
||||
return this.dark ? '#fff' : '#333'
|
||||
}
|
||||
}
|
||||
return this.color || '#333'
|
||||
},
|
||||
navbarHeight() {
|
||||
return getVal(this.height)
|
||||
},
|
||||
leftIconWidth() {
|
||||
return getVal(this.leftWidth)
|
||||
},
|
||||
rightIconWidth() {
|
||||
return getVal(this.rightWidth)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (uni.report && this.stat && this.title !== '') {
|
||||
uni.report('title', this.title)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onClickLeft() {
|
||||
this.$emit("clickLeft");
|
||||
},
|
||||
onClickRight() {
|
||||
this.$emit("clickRight");
|
||||
},
|
||||
onClickTitle() {
|
||||
this.$emit("clickTitle");
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$nav-height: 44px;
|
||||
|
||||
.uni-nvue-fixed {
|
||||
/* #ifdef APP-NVUE */
|
||||
position: sticky;
|
||||
/* #endif */
|
||||
}
|
||||
.uni-navbar {
|
||||
// box-sizing: border-box;
|
||||
}
|
||||
|
||||
.uni-nav-bar-text {
|
||||
/* #ifdef APP-PLUS */
|
||||
font-size: 34rpx;
|
||||
/* #endif */
|
||||
/* #ifndef APP-PLUS */
|
||||
font-size: 14px;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.uni-nav-bar-right-text {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.uni-navbar__content {
|
||||
position: relative;
|
||||
// background-color: #fff;
|
||||
// box-sizing: border-box;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.uni-navbar__content_view {
|
||||
// box-sizing: border-box;
|
||||
}
|
||||
|
||||
.uni-navbar-btn-text {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
line-height: 12px;
|
||||
}
|
||||
|
||||
.uni-navbar__header {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
padding: 0 10px;
|
||||
flex-direction: row;
|
||||
height: $nav-height;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.uni-navbar__header-btns {
|
||||
/* #ifndef APP-NVUE */
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-wrap: nowrap;
|
||||
flex-direction: row;
|
||||
width: 120rpx;
|
||||
// padding: 0 6px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
/* #ifdef H5 */
|
||||
cursor: pointer;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.uni-navbar__header-btns-left {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
width: 120rpx;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.uni-navbar__header-btns-right {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
// width: 150rpx;
|
||||
// padding-right: 30rpx;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.uni-navbar__header-container {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex: 1;
|
||||
padding: 0 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.uni-navbar__header-container-inner {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
overflow: hidden;
|
||||
// box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
.uni-navbar__placeholder-view {
|
||||
height: $nav-height;
|
||||
}
|
||||
|
||||
.uni-navbar--fixed {
|
||||
position: fixed;
|
||||
z-index: 998;
|
||||
/* #ifdef H5 */
|
||||
left: var(--window-left);
|
||||
right: var(--window-right);
|
||||
/* #endif */
|
||||
/* #ifndef H5 */
|
||||
left: 0;
|
||||
right: 0;
|
||||
/* #endif */
|
||||
|
||||
}
|
||||
|
||||
.uni-navbar--shadow {
|
||||
box-shadow: 0 1px 6px #ccc;
|
||||
}
|
||||
|
||||
.uni-navbar--border {
|
||||
border-bottom-width: 1rpx;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-color: #eee;
|
||||
}
|
||||
|
||||
.uni-ellipsis-1 {
|
||||
overflow: hidden;
|
||||
/* #ifndef APP-NVUE */
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
/* #endif */
|
||||
/* #ifdef APP-NVUE */
|
||||
lines: 1;
|
||||
text-overflow: ellipsis;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
// 暗主题配置
|
||||
.uni-dark {}
|
||||
</style>
|
||||
@@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<view :style="{ height: statusBarHeight }" class="uni-status-bar">
|
||||
<slot />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'UniStatusBar',
|
||||
data() {
|
||||
return {
|
||||
statusBarHeight: 20
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" >
|
||||
.uni-status-bar {
|
||||
// width: 750rpx;
|
||||
height: 20px;
|
||||
// height: var(--status-bar-height);
|
||||
}
|
||||
</style>
|
||||
86
uni_modules/uni-nav-bar/package.json
Normal file
86
uni_modules/uni-nav-bar/package.json
Normal file
@@ -0,0 +1,86 @@
|
||||
{
|
||||
"id": "uni-nav-bar",
|
||||
"displayName": "uni-nav-bar 自定义导航栏",
|
||||
"version": "1.3.9",
|
||||
"description": "自定义导航栏组件，主要用于头部导航。",
|
||||
"keywords": [
|
||||
"uni-ui",
|
||||
"导航",
|
||||
"导航栏",
|
||||
"自定义导航栏"
|
||||
],
|
||||
"repository": "https://github.com/dcloudio/uni-ui",
|
||||
"engines": {
|
||||
"HBuilderX": ""
|
||||
},
|
||||
"directories": {
|
||||
"example": "../../temps/example_temps"
|
||||
},
|
||||
"dcloudext": {
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
|
||||
"type": "component-vue"
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [
|
||||
"uni-scss",
|
||||
"uni-icons"
|
||||
],
|
||||
"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"
|
||||
},
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
15
uni_modules/uni-nav-bar/readme.md
Normal file
15
uni_modules/uni-nav-bar/readme.md
Normal file
@@ -0,0 +1,15 @@
|
||||
|
||||
|
||||
## NavBar 导航栏
|
||||
> **组件名：uni-nav-bar**
|
||||
> 代码块： `uNavBar`
|
||||
|
||||
导航栏组件，主要用于头部导航。
|
||||
|
||||
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-nav-bar)
|
||||
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
12
uni_modules/uni-swiper-dot/changelog.md
Normal file
12
uni_modules/uni-swiper-dot/changelog.md
Normal file
@@ -0,0 +1,12 @@
|
||||
## 1.2.0（2021-11-19）
|
||||
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
|
||||
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-swiper-dot](https://uniapp.dcloud.io/component/uniui/uni-swiper-dot)
|
||||
## 1.1.0（2021-07-30）
|
||||
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
|
||||
## 1.0.6（2021-05-12）
|
||||
- 新增 示例地址
|
||||
- 修复 示例项目缺少组件的Bug
|
||||
## 1.0.5（2021-02-05）
|
||||
- 调整为uni_modules目录规范
|
||||
- 新增 clickItem 事件，支持指示点控制轮播
|
||||
- 新增 支持 pc 可用
|
||||
@@ -0,0 +1,218 @@
|
||||
<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/2 +'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',
|
||||
emits:['clickItem'],
|
||||
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: 6,
|
||||
height: 6,
|
||||
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 = 14
|
||||
this.dots.height = 14
|
||||
} else {
|
||||
this.dots.width = 6
|
||||
this.dots.height = 6
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
created() {
|
||||
if (this.mode === 'indexes') {
|
||||
this.dots.width = 12
|
||||
this.dots.height = 12
|
||||
}
|
||||
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: rgba(0, 0, 0, 0.4);
|
||||
/* #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: 26px;
|
||||
padding: 8px 0;
|
||||
/* #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: 14px;
|
||||
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: 12px;
|
||||
line-height: 14px;
|
||||
}
|
||||
</style>
|
||||
87
uni_modules/uni-swiper-dot/package.json
Normal file
87
uni_modules/uni-swiper-dot/package.json
Normal file
@@ -0,0 +1,87 @@
|
||||
{
|
||||
"id": "uni-swiper-dot",
|
||||
"displayName": "uni-swiper-dot 轮播图指示点",
|
||||
"version": "1.2.0",
|
||||
"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": ["uni-scss"],
|
||||
"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"
|
||||
},
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
11
uni_modules/uni-swiper-dot/readme.md
Normal file
11
uni_modules/uni-swiper-dot/readme.md
Normal file
@@ -0,0 +1,11 @@
|
||||
|
||||
|
||||
## SwiperDot 轮播图指示点
|
||||
> **组件名：uni-swiper-dot**
|
||||
> 代码块： `uSwiperDot`
|
||||
|
||||
|
||||
自定义轮播图指示点
|
||||
|
||||
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-swiper-dot)
|
||||
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
|
||||
Reference in New Issue
Block a user