为什么说是基础知识点呢 因为深点儿的东西我不会
虽然说小程序这类的也接触过 但是 皮毛 是个类似于携程的民宿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'
})
},很简单 很基础
好了 没了 我两天能写出来的东西也不多
得边查边写 要是有帮助就给我点个赞再走吧
以上 收队
