uniapp自用速查表 - 我的常用组件

Posted 2022-09-29 Rudon滨海渔村

纯私人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 = fn

App.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

常见页面 - 标签页切换 - 不同列表切换

<template>
	<view>

		<!-- Tab标签头部 -->
		<view>
			<view class="TopTabs" style="display: flex; flex-direction: row; justify-content: space-evenly;">
				<view class="oneTab" :class="'active': showingTabIndex == 0" @click="showingTabIndex = 0">
					All
				</view>
				<view class="oneTab" :class="'active': showingTabIndex == 1" @click="showingTabIndex = 1">
					BB
				</view>
				<view class="oneTab" :class="'active': showingTabIndex == 2" @click="showingTabIndex = 2">
					CC
				</view>
			</view>
		</view>
		<hr>


		<!-- Tab标签内容容器 -->
		<swiper class="swiper" :indicator-dots="false" :autoplay="false" @change="swiperChanged"
			:current="showingTabIndex" :style="'height': height">

			<swiper-item>
				<!-- .oneDom容器 实际高度 会赋值给swiper作为高度 -->
				<view class="oneDom">
					<view v-for="(item, key) in list" :key="'key'+key">
						 item 
						<!-- 1到100 -->
					</view>
				</view>
			</swiper-item>

			<swiper-item>
				第二个列表
			</swiper-item>

			<swiper-item>
				第三个列表
			</swiper-item>

		</swiper>

	</view>
</template>

<script>
	export default 
		data() 
			return 
				// 正在显示的标签页下标
				showingTabIndex: 0,

				// 测试数据 - onLoad以后填充1到100
				list: [],

				// 预设的swiper高度， 80%屏幕高度
				height: '80vh'

			
		,

		// 页面OK以后
		onLoad() 

			// 测试数据填充 - 1到100
			for (var i = 1; i <= 100; i++) 
				this.list.push(i)
			

			// 动态设置Swiper高度
			this.setH()
			

		,

		methods: 

			// 设置高度
			setH() 
				
				// 延时设置高度 -- 一定要延时，否则报错 - 300毫秒一般都够了
				setTimeout(() => 
					
					
					// uniapp自带方法 - 获取DOM的高度等信息
					// https://uniapp.dcloud.net.cn/api/ui/nodes-info.html#createselectorquery
					
					// 节点查询
					const query = uni.createSelectorQuery().in(this)
					
					// 开始
					query.select('.oneDom').boundingClientRect(data => 
					
						console.log("【DOM尺寸信息】" + JSON.stringify(data))
					
						// 获取DOM的高度， 单位是像素
						let h = data.height
						
						// 补上单位
						h += 'px'
						
						// 实际高度赋值给swiper
						this.height = h
						
						console.log('【动态设置高度】', h)
					
					).exec()
					
				, 300)
				
			,



			// 左右滑动时
			swiperChanged(e) 
				this.showingTabIndex = e.detail.current
				console.log('Switch to Tab #', this.showingTabIndex)
			

		
	
</script>

<style>
	/* 默认Tab样式 */
	.oneTab 
		color: black;
		padding-top: 10px;
		padding-bottom: 10px;
		position: relative;
	

	.oneTab:after 
		content: '';
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		border-bottom: 1px solid transparent;
	


	/* active激活状态的Tab样式 */
	.oneTab.active 
		color: #d3bb30;

	

	.oneTab.active:after 
		border-bottom: 1px solid red;
	

	swiper-item 
		padding-left: 10px;
	
</style>