uni-app基于原生input增强选择picker插件 可用于地图定位选位置 页面跳转选数据

随着技术的发展,开发的复杂度也越来越高,传统开发方式将一个系统做成了整块应用,经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改,造成牵一发而动全身。通过组件化开发,可以有效实现单独开发,单独维护,而且他们之间可以随意的进行组合。大大提升开发效率低,降低维护成本。

组件化对于任何一个业务场景复杂的前端应用以及经过多次迭代之后的产品来说都是必经之路。组件化要做的不仅仅是表面上看到的模块拆分解耦,其背后还有很多工作来支撑组件化的进行,例如结合业务特性的模块拆分策略、模块间的交互方式和构建系统等等 。

本文给大家介绍的一款组件是:

前端基于原生input增强选择picker插件 可用于地图定位选位置 页面跳转选数据

小程序体验地址(已上线):

效果图如下:

edfc80a121d895577c1018ee26c85741.png

dad6d804ce7e1cdc926d96ee8570b960.png

319f9dd81bbc3ad5a1f7af85fe62369b.png

# 基于原生input增强选择picker插件 可用于地图定位选位置 页面跳转选数据

#### 使用方法

```使用方法

<!-- leftTitle:左边标题 name:输入框名字 value:输入框选择值  placeholder:占位符-->

<ccInputSelView leftTitle="收获地点" name="location" :value="mapSelData.name" placeholder="请选择位置"

@click="chooseAddress"></ccInputSelView>

```

#### HTML代码部分

```html

<template>

<view class="content">

<form @submit="formSubmit" @reset="formReset">

<!-- leftTitle:左边标题 name:输入框名字 value:输入框选择值  placeholder:占位符-->

<ccInputSelView leftTitle="收获地点" name="location" :value="mapSelData.name" placeholder="请选择位置"

@click="chooseAddress"></ccInputSelView>

<!-- leftTitle:左边标题 name:输入框名字  value:输入框值  placeholder:占位符 -->

<ccInputView leftTitle="详细地址" name="address" :value="mapSelData.address" placeholder="请输入详细地址">

</ccInputView>

<view class="uni-btn-v">

<button class="botBtn" type="primary" form-type="submit">下一步</button>

<view class="tipText"> 注意事项: 请确保您填写的房屋信息真实无误 </view>

</view>

</form>

</view>

</template>

```

#### JS代码 (引入组件 填充数据)

```javascript

<script>

import ccInputSelView from '../../components/ccInputSelView.vue'

import ccInputView from '../../components/ccInputView.vue'

export default {

components: {

ccInputSelView,

ccInputView

},

data() {

return {

mapSelData: {},

}

},

methods: {

formSubmit: function(e) {

console.log('form发生了submit事件,携带数据为:' + JSON.stringify(e));

var formdata = e.detail.value;

uni.showModal({

title: '温馨提示',

content: 'formsubmit事件携带数据为:' + JSON.stringify(e.detail.value)

})

},

// 选择地址

chooseAddress(e) {

let myThis = this;

// 需要运行手机硬件才可以选

uni.chooseLocation({

success: function(res) {

myThis.mapSelData = res;

console.log('位置名称:' + res.name);

console.log('详细地址:' + res.address);

console.log('纬度:' + res.latitude);

console.log('经度:' + res.longitude);

}

});

// 模拟地图选位数据

myThis.mapSelData = {

'name': '桂花便利店',

'address': '广东省佛山市南海区桂城街道南新四路36号',

'longitude': '113.22',

'latitude': '23.89',

};

},

}

}

</script>

```

#### CSS

```CSS

<style>

.content {

display: flex;

flex-direction: column;

}

.uni-btn-v {

width: 100%;

height: auto;

}

.botBtn {

width: 90%;

margin-top: 36px;

}

.tipText {

width: 100%;

margin-left: 0px;

text-align: center;

color: #666666;

margin-top: 36px;

margin-bottom: 36px;

font-size: 28rpx;

}

</style>

```

阅读全文下载完整组件代码请关注微信公众号: 前端组件开发

d848d5658a07453c843277846948c608.png

当然,以下是对uni-app中布局、组件和交互三个板块内容的进一步补充: ## 布局 在uni-app中,布局是构建页面的基础,它决定了页面中元素的排列和分布。 ### 1. 定位(Positioning) - **相对定位(Relative Positioning)**:元素的位置相对于其在文档流中的原始位置进行偏移。使用`top`、`right`、`bottom`、`left`属性。 - **绝对定位(Absolute Positioning)**:元素的位置相对于其最近的已定位(非static)祖先元素进行定位。如果没有这样的祖先元素,则相对于初始化包含块(通常是文档的`<html>`元素)。 ### 2. 盒子模型(Box Model) - **边框(Border)**:围绕内边距的边框,可以设置宽度、样式和颜色。 - **内边距(Padding)**:元素内容和边框之间的空间,内边距会将元素的尺寸扩大。 - **外边距(Margin)**:元素与其他元素之间的空间,用于分隔元素。 ### 3. Flexbox 弹性布局 - **主轴(Main Axis)**:沿着主轴的排列方向(`row`或`column`)。 - **侧轴(Cross Axis)**:垂直于主轴的轴。 - **空间分配**:使用`justify-content`和`align-items`属性来控制项目在主轴和侧轴上的对齐方式。 - **项目排列**:使用`flex-direction`属性来控制项目的排列方向。 ## 组件 uni-app提供了丰富的组件,用于构建用户界面。 ### 1. 视图容器组件 - **`view`**:类似于HTML中的`div`,用于页面布局。 - **`cover-view`**:覆盖在原生组件上的容器,可以覆盖在`map`、`video`等组件上。 - **`swiper`**:滑块视图容器,用于创建滑动效果。 - **`scroll-view`**:可滚动视图容器,用于区域滚动。 ### 2. 表单组件 - **`input`**:输入框,用于文本输入。 - **`button`**:按钮,用于触发事件。 - **`checkbox`**:复框,用于多项选择- **`radio`**:单框,用于单项选择- **`switch`**:开关,用于切换状态。 - **`slider`**:滑块,用于选择一个范围值。 ### 3. 选择器组件 - **`picker`**:选择器,用于选择信息,如日期、时间等。 - **`picker-view`**:多列选择器,用于复杂的选择场景。 ### 4. 媒体组件 - **`audio`**:音频组件,用于播放音频。 - **`video`**:视频组件,用于播放视频。 - **`camera`**:相机组件,用于拍照或录像(部分平台支持)。 - **`live-player`**:直播播放组件(部分平台支持)。 - **`live-pusher`**:直播推流组件(部分平台支持)。 ### 5. 地图组件 - **`map`**:地图组件,用于显示地图和标记位置。 ### 6. 图标组件 - **`icon`**:图标组件,使用`type`属性指定图标类型,`size`属性指定图标大小。 ## 交互 在uni-app中,交互是用户与应用之间沟通的桥梁。 ### 1. 组件间交互 - **事件绑定**:通过`@`符号绑定事件,如`@click`、`@change`等。 - **数据绑定**:使用`v-bind`或简写`:`绑定数据。 ### 2. 页面间交互 - **页面跳转**:使用`uni.navigateTo`、`uni.redirectTo`等API实现页面跳转- **页面传参**:通过`url`参数传递数据。 ### 3. 前后端交互 - **网络请求**:使用`uni.request`发起网络请求,与后端进行数据交互。 - **数据缓存**:使用`uni.setStorageSync`和`uni.getStorageSync`进行数据缓存。 ### 4. 表单提交 - **提交表单**:使用`form`组件的`@submit`事件处理表单提交。 ### 5. 用户反馈 - **加载提示**:使用`uni.showLoading`和`uni.hideLoading`显示和隐藏加载提示。 - **模态弹窗**:使用`uni.showModal`显示模态弹窗。 --- 以上是对uni-app布局、组件和交互板块内容的补充,希望能够帮助您更全面地理解和掌握uni-app开发。如果您有任何疑问或需要进一步的帮助,请随时提问。生成思维导图
最新发布
03-11
感谢您的分享,关于uni-app布局、组件和交互的内容非常详尽。为了更好地帮助您理解这些知识点,并方便记忆和查阅,下面我将为您生成一个简洁的思维导图概述: ``` Uni-app 开发要素 │ ├── 布局 │ ├── 定位 (Positioning) │ │ └── 相对定位 & 绝对定位 │ ├── 盒子模型 (Box Model) │ │ └── 边框(Border), 内边距(Padding), 外边距(Margin) │ └── Flexbox 弹性布局 │ ├── 主轴(Main Axis): row/column │ ├── 侧轴(Cross Axis) │ └── 空间分配&项目排列: justify-content, align-items, flex-direction │ ├── 组件 │ ├── 视图容器组件 │ │ └── view / cover-view / swiper / scroll-view │ ├── 表单组件 │ │ └── input/button/checkbox/radio/switch/slider │ ├── 选择器组件 │ │ └── picker / picker-view │ ├── 媒体组件 │ │ └── audio/video/camera/live-player/live-pusher │ ├── 地图组件 │ │ └── map │ └── 图标组件 │ └── icon(type/size) │ └── 交互 ├── 组件间交互 │ └── 事件绑定(@click/@change...) 和 数据绑定(v-bind/:) ├── 页面间交互 │ └── 页面跳转(navigateTo/redirectTo...) 及 页面传参(url参数) ├── 前后端交互 │ └── 网络请求(uni.request) 和 数据缓存(setStorageSync/getStorageSync) ├── 表单提交 │ └── form @submit 事件 └── 用户反馈 └── 加载提示(showLoading/hideLoading) 和 模态弹窗(showModal) ``` 这个结构化的思维导图可以帮助您快速回顾各个关键点并建立知识体系间的联系。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端组件开发

你的钟意将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值