uniapp自用速查表 - 我的常用组件
Posted Rudon滨海渔村
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了uniapp自用速查表 - 我的常用组件相关的知识,希望对你有一定的参考价值。
纯私人class,公开文章是方便置顶....
<!-- 自定义导航栏 占位空间 -->
<view class="navigationStyleCustomHeight alwaysOnTopBox0 bgColorForTheme"></view>
<!-- 自定义导航栏 -->
<view class="alwaysOnTopBox1 myNavBar">
<uni-nav-bar shadow title="我的收货地址" leftIcon="back" rightIcon="search" @clickLeft="goBack" @clickRight="goSearch"></uni-nav-bar>
</view>
<style scoped>
.myNavBar /deep/ .uni-nav-bar-text
font-size: 16px !important;
font-weight: bold;
</style>
<!-- 底部固定按钮 -->
<view class="alwaysAtBottomFullRow">
<view class="box paddingCol20">
<view class="buttonForTheme">
确定
</view>
</view>
</view>
制作套壳APP
1. 新建uniapp项目(可以不使用uni-ui)
2. 修改 \\pages\\index\\index.vue,在template的view中添加:
<web-view src="https://xxx.com/xxx/"></web-view>
3. OK
4. 可以隐藏index.vue的顶部导航栏,或者全屏
pages.json >> globalStyle >> 添加"navigationStyle": "custom"
自定义字体
1. 放置ttf文件到\\static\\xx.ttf
2. 参考 \\static\\customicons.css 修改ttf位置
3. 修改 \\app.vue,引入上面的css文件
4. 在各自的pages的vue文件的style中使用 .xx font-family: 'xx';
5. OK, 不行就重新编译app
全局通用css样式
修改 \\app.vue,在style中引入,格式:
@import '@/static/xx.css';
全局函数、全局方法
\\common\\fn.js
function fn1 (param) return 'result1';
function fn2 (param) return 'result2';export default
fn1,
fn2
\\main.js
import Vue from 'vue'
import App from './App'
import fn from './common/fn.js'Vue.config.productionTip = false
Vue.prototype.$fn = fnApp.mpType = 'app'
const app = new Vue(
fn,
...App
)
app.$mount()
\\pages\\xx\\xx.vue
let xx = this.$fn.fn1( 'anything' )
全局变量定义、修改、读取
登录状态、退出登录
本地存储 (登录-记住我)
Tabbar底部标签栏实现
顶部导航栏修改、自定义、添加右边的按钮
页面下拉刷新
图片懒加载
页面触底刷新、下一页、分页
Ajax交互 - 文字
Ajax交互 - 文字 + 图片视频 (文件上传)
Ajax交互 - 文字 + PDF文件上传(或其他)
修改内置组件样式
自定义图标
App图标设置
App启动页
alert提示
confirm确认提示框
饼状图、柱状图、统计图表
获取短字符串 (后面星号代替)
// 获取短字符串 (后面星号代替)
get_short_string (str, max_length = 10, separator = '*')
// 字符串转数组
let res = String(str)
let arr = res.split('')
// 星号长度
let separator_length = 3
// 正数
max_length = Math.max(0, parseInt(max_length))
// 星号除外的长度
let cut_length = Math.max(0, max_length - separator_length)
if (arr.length > max_length)
// 如果长度符合
res = ''
for (let i in arr)
if (i < cut_length)
// 切
res += arr[i]
// 拼接
res += separator.repeat(separator_length)
return res
,// 获取短字符串 (中间用星号代替)
get_short_string_two_sides (str, max_length = 10, side_length = 3, separator = '*')
// 规范
max_length = Math.max(0, parseInt(max_length))
side_length = Math.max(0, parseInt(side_length)) // 两边明文长度
// 字符串转数组
let res = String(str)
let arr = res.split('')
// 直接返回短字符串
if (arr.length <= max_length || arr.length < 4)
return res
// 调整两边明文长度
let half_length = Math.ceil( max_length / 2 ) // 一半长度
side_length = Math.min(side_length, half_length - 1) // 两边明文长度 要小于一半长度
// 星号开始下标
let separator_start_index = side_length
// 星号结束下标
let separator_end_index = arr.length - side_length - 1
// 星号长度
let separator_length = max_length - side_length - side_length
// 正数
separator_length = Math.max(0, separator_length)
// 开切
res = ''
let left = ''
let right = ''
for (let i in arr)
if (i < separator_start_index)
// 切
left += arr[i]
if (i > separator_end_index)
// 切
right += arr[i]
// 拼接
res = left + separator.repeat(separator_length) + right
return res
,
多选 / 单选 - radio checkbox
常见页面 - 标签页切换 - 不同列表切换 (自用class)
<template>
<view>
<!-- Tab标签头部 -->
<view class="bgColorWhite">
<view class="TopTabs rowSpaceEvenly">
<view class="oneTab" :class="'active': showingTab == 0" @click="showingTab = 0">
<text>全部</text>
</view>
<view class="oneTab" :class="'active': showingTab == 1" @click="showingTab = 1">
<text>未处理</text>
</view>
<view class="oneTab" :class="'active': showingTab == 2" @click="showingTab = 2">
<text>已完成</text>
</view>
</view>
</view>
<!-- Tab标签内容容器 -->
<swiper class="swiper" :indicator-dots="false" :autoplay="false" @change="swiperChanged"
:current="showingTab" :style="'height': height">
<swiper-item>
<!-- .oneDom容器 实际高度 会赋值给swiper作为高度 -->
<view class="oneDom-0">
第1个列表
</view>
</swiper-item>
<swiper-item>
<view class="oneDom-1">
第2个列表
</view>
</swiper-item>
<swiper-item>
<view class="oneDom-2">
第3个列表
</view>
</swiper-item>
</swiper>
</view>
</template>
<script>
export default
data()
return
// 正在显示的标签页下标
showingTab: 0,
// 预设的swiper高度, 80%屏幕高度
height: '80vh'
,
// 页面OK以后
onLoad()
// 动态设置Swiper高度
this.setH()
,
methods:
// 设置高度
setH()
// 延时设置高度 -- 一定要延时,否则报错 - 300毫秒一般都够了
setTimeout(() =>
// 节点查询
const query = uni.createSelectorQuery().in(this)
// 开始
query.select('.oneDom-' + this.showingTab).boundingClientRect(data =>
// 获取DOM的高度, 单位是像素
let h = data.height
h = Math.max(500, h)
// 补上单位
h += 'px'
// 实际高度赋值给swiper
this.height = h
console.log('【动态设置高度】', h)
).exec()
, 300)
,
// 左右滑动时
swiperChanged(e)
this.showingTab = e.detail.current
// 动态设置高度
this.setH()
</script>
<style>
/* 默认Tab样式 */
.oneTab
color: black;
padding-top: 10px;
padding-bottom: 10px;
position: relative;
.oneTab:after
content: '';
position: absolute;
left: 30%;
bottom: 0;
width: 40%;
border-bottom: 1px solid transparent;
/* active激活状态的Tab样式 */
.oneTab.active
color: #FF8D1A;
.oneTab.active:after
border-bottom: 1px solid #FF8D1A;
</style>
以上是关于uniapp自用速查表 - 我的常用组件的主要内容,如果未能解决你的问题,请参考以下文章