千字文 uni-app的基础、uni-app入门 点击后屏幕底部出现弹框， 页头导航按钮和文字怎么写， 元素头部标记的用法​​， 底部导航栏icon图标， 收取短信的输入框​， 页面跳转信息存储不变

为什么说是基础知识点呢 因为深点儿的东西我不会 
虽然说小程序这类的也接触过 但是 皮毛  是个类似于携程的民宿App
就是租房用的 小程序俺不擅长 一边学一边写 免不了速度慢  先说说这几天遇到的点吧
虽然都是简单的问题 但是 对新手应该很友好 

目录

 点击后屏幕底部出现弹框

 页头导航按钮和文字怎么写​

 元素头部标记的用法​

 底部导航栏icon图标

 收取短信的输入框​

 页面跳转信息存储不变：

---

点击屏幕底部出现弹框

就像这样：
 

很简单 首先需要点击的地方加个@click=" "       然后：

methods:{
			kefu(){
				const that = this;
				uni.showActionSheet({
					itemList:[
						'在线客服',
						'电话客服'
					],
				
                    //方便测试 可以输出打印一下 看看是否选中了
					success: function(res) {
					   console.log('选中了第'  + (res.tapIndex + 1) + '个按钮');    
					},
				});
			}
		}

他默认颜色是灰色的 很丑 可以 
在itemList后面 加上这段代码：
    itemColor:"#2367C7",    //这里颜色你自定义

很简答 
 

---

页头顶部按钮、文字

类似这样的怎么写：

找到你的pages.json
找到所需页面

{
			"path": "pages/index/user",
			"style": {
				"navigationBarTitleText": "",
				"navigationBarBackgroundColor": "#FFFFFF",
				"navigationBarTextStyle": "black",
				"titleNView":{
					"buttons":[{
                                "text": "\ueb95",
                                "fontSrc": "/static/iconfont.ttf",
                                "fontSize": "22px",
                                "float": "left"
                            },
							{
								"text": "\ueb80",
								"fontSrc": "/static/iconfont.ttf",
								"fontSize": "22px",
								"float": "right"
							},
							{
							    "text": "\ueb81",
							    "fontSrc": "/static/iconfont.ttf",
							    "fontSize": "22px",
							    "float": "right"
							}]
				}
		
			}
		
		}

这样就行了
那么 " text " : " \uexxx" 是什么东西呢？ 我一开始也不知道 所以查了一下 是你的icon图标
那么这图标为什么怎么写呢，
所以 首先 来到 阿里图标库 找到所需图标 收藏 下载：
       

这时候你会得到一个压缩文件 打开他：


把这个文件拖到你的项目中去 然后就可以使用" /u xxx"：了，那么后面的数字字母哪来的呢：
这里就是 xe后面的 直接拿过来用
 "fontSrc": "/static/iconfont.ttf", 注意这段 是你拖到项目中的iconfont.ttf文件地址

这个很简单

---

标记的用法：

这个去Element找 > > > > > > > >标记组件

先导入element js 
在你所需地方用这串代码包起来：<el-badge value="XXXX" > </el-badge>    
这个也很简单

---

 底部导航栏

先把这几个页面新建起来，依旧来到pages.json
然后 写个tabBar：

"tabBar":{
		"color":"#717171",
		"selectedColor":"#343434",
		"borderStyle":"black",
		"backgroundColor":"#eaeaea",
		"list":[{
			 "pagePath": "pages/index/home",
			 "iconPath": "static/icon/3.1首页 (1).png",
			 "selectedIconPath": "static/icon/3.1首页.png",
			 "text": "首页"
		}
		]
	}

iconPath：点击前的颜色
selectedIconPath：点击后
很简单易懂吧
 

---

 短信输入框

  四个横线 怎么写：
 

<view class="input-div">
			<input
			 type="text" 
			 class="inputItem0" 
			 data-index="0" 
			 maxlength="1" />
			 
			<input
			 type="text" 
			 class="inputItem1" 
			 data-index="1" 
			 maxlength="1" />
			 
			<input
			 type="text" 
			 class="inputItem2" 
			 data-index="2" 
			 maxlength="1" />
			 
			<input
			 type="text" 
			 class="inputItem3" 
			 data-index="3" 
			 maxlength="1" />
			 
		</view>

这是四个横线 
样式：

	.input-div {
				display: flex;
				justify-content: center;
		}
		
		.letter-header{
			font-size: 50rpx;
			font-weight: 400;
		}
		
		input {
				text-align: center;
				width: 50px;
				height: 50px;
				border-bottom: 1px solid #999999;
				margin: 37rpx;
			}
			
		input:focus {
			

就好了 很简单
 

---

跳转 信息存储不变：
 

先在需要跳转的地方加上@click="duanxin"  名字你自定义就好 还是一共click方法 然后methods中加上跳转地址
像这样 就好了

	duanxin(){
				uni.navigateTo({
					url:'./letter'
				})
			},

很简单 很基础
 

---

好了 没了 我两天能写出来的东西也不多
得边查边写 要是有帮助就给我点个赞再走吧 
 

以上 收队