又双叒一个uniapp组件 最近有一个选择地址的需求,就写了一个省市区联动选择器. 选择日期使用的picker,就照着它简单的整了一个,使用网络请求城市数据,还用到了vuex组件数据共享. 本来自己整了一个底部弹窗,又在插件市场看到了更好的底部弹窗 :LuPopupWrapper--弹窗容器, 所以就用了这个. 依然发布到了插件市场:http://ext.dcloud.net.cn/plugin?id=708 看一下效果吧 具体实现 css就不贴出来了,下载可以看到. 第一.底部弹出框 <vie

不说废话,上效果图 因为我有多处要用到,所以我这里是写成自定义组件的,你也可以直接改成在page页面编写: 布局左边一个scroll-view,显示城市列表,右边一个view显示字母列表,城市列表这边有首字母显示,给这个添加这个字母的ID,然后给右边的26个字母添加点击事件,点击的时候获取到点击的是哪个字母,给scroll-view的scroll-into-view赋值相应的字母,它左边就可以跳到相应的地方,再给scroll-view 加一个scroll-with-animation,让它跳转的

一,  兄弟组件间联动 1.  点击城市字母,左侧对应显示 给遍历的 字母 添加一个点击事件: Alphabet.vue @click="handleLetterClick" handleLetterClick (e) { //获取对应的字母 this.$emit('change', e.target.innerHTML) } 在 父组件City.vue 中,监听 <city-alphabet :cities="cities" @change="ha

成果展示 最后的成果就是下面所展示的内容,因为gif图没有做,只能截图所展示,接下来,会带着大家一步一步的完成下面功能,脚手架搭建和node安装在本次案例不会讲解,如果了解,可以在我的博客园找到有详细介绍 准备工作: 引入axios插件,调用better-scroll第三方插件,本地json文件,可以参考目录中的city.json,有条件的也可以自己去扒 功能分析 1.获取json数据展示城市列表 . 2.侧边字母定位滚动到相应的位置. 3.实现搜索城市 接下来我们开始对组件进行划分:本次案例中

实现两个联动 一是点击右侧字母的时候,城市列表出现相应首字母下的城市 二是鼠标在字母表上滑动的时候,城市列表实时跟着变化 一．点击字母出现相应的列表,给每个字母设置handleLetterClick事件 <template>     <div>        <ul class="list">            <li class="item"             v-for="item of letter

全国城市列表选择 (包含定位城市.热门城市.全国城市) 用ScrollView 实现,解决 SectionList 实现的卡顿问题 实现效果如图: 代码实现如图: 主逻辑文件 cityList.js 'use strict'; import React, {Component} from "react" import {Dimensions, ScrollView, StyleSheet, Text, TouchableOpacity, View} from 'react-native

values 下dimens.xml <resources> <!-- Default screen margins, per the Android Design guidelines. --> <dimen name="activity_horizontal_margin">16dp</dimen> <dimen name="activity_vertical_margin">16dp</dime

activity_main.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent"

你运行一下代码会发现,无论你点击哪个列表,控制台都是输出10.这是因为var声明的变量是函数作用域的,而不是块级作用域的.也就是说,for循环10次,每次都是改变同一个i,所以它的值会从0一直加到10.还有个问题是闭包导致的,闭包保存的是外部变量的引用,而不是值.也就是说,循环10次监听器创建了10 个闭包,它们里面的i引用的是同一个啊.所以全部都指向了10. 要解决这个问题有两种方法.一种是使用ES6的let来替代 var i = 0 里面的var, 因为let支持块级作用域.改成如下就正常了

项目地址: https://github.com/caochangkui/vue-cli3 项目代码: 城市列表首页: City.vue <template> <div id="city"> <!-- <img src="/logo.png" alt="" height="10px"> --> <div class="word" v-show="

这篇文章主要介绍了jquery实现点击展开列表同时隐藏其他列表的方法,涉及jquery鼠标事件及节点的遍历与属性操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了jquery实现点击展开列表同时隐藏其他列表.分享给大家供大家参考.具体如下: 这里使用jquery实现展开.隐藏特效,点击列表标题后该项内容展开,其它项收缩起来,也就是不显示了.个人喜好了,有的喜欢在默认状态下不显示其它选项的内容,这个就是这种情况,仅供参考吧. 运行效果截图如下: 具体代码如下: ? 1 2 3 4

DJSelectCityViewController.h // 点击城市发出通知 - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath { // 1. 发送点击的城市名 DJCityGroup *cityGroup = self.cityGroups[indexPath.section]; [[NSNotificationCenter defaultCenter] p

附上 国际区号编码:我是定义到arrays.xml里面了 <?xml version="1.0" encoding="utf-8"?> <resources> <string-array name="cities_data"> <item>中国大陆+</item> <item>香港+</item> <item>澳门+</item> <

最近需要实现一个城市列表的快速索引功能.类似于联系人应用,根据姓名首字母快速索引功能. 要实现这个功能只需要解决两个问题:1.对列表进行分组(具有同一特征),并且能够快速定位到该组的第一项 2.右侧分组‘特征’快速索引栏的实现第一个问题比较好解决,列表项可以根据相同的‘特征’来分组,比如说城市列表可以根据相同首字母的城市名来进行分组. 如何来定位到分组的第一项,只需要把分组的‘特征’和分组第一项下标关联起来,快速索引栏就能快速定位分组第一项第二个问题可以通过自定义控件来实现,实现的形式有很多,可

摘要: 小程序索引选择器,点击跳转相应条目,索引可滑动,滑动也可跳转 场景:城市选择列表, 汽车品牌选择列表 所用组件: scroll-view(小程序原生) https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html 所用API: wx.getSystemInfo     https://developers.weixin.qq.com/miniprogram/dev/api/base/system/s

一,效果图. 二,工程图. 三,代码. RootViewController.h #import <UIKit/UIKit.h> @interface RootViewController : UIViewController <UITableViewDelegate,UITableViewDataSource> { UITableView * _tableView; NSMutableArray * provinceArray; } @end RootViewController

今天在做Demo的过程中,使用到了ListView.然而在实现过程中,发现一个出现了一个问题:只能点击列表项的文字区域可以触发点击事件,而点击列表项的空白区域无法触发点击事件. 如下图: listitem的布局文件: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android&q

点击删除按钮,删除列表中对应项本来是React比较基础的应用,可是应用情况变得复杂了以后,我还真想了一会儿才搞定. 简化一下应用场景:点击新增按钮,增加一条输入框,点击输入框旁边的按钮,删除该输入框(不能删错了啊). 先说第一种方法 问题刚上手,首先规划级别:一个输入框和对应删除按钮为一个子组件,整体为父组件即可方便处理. 注意的点:生成的一坨输入框是一个数组,为了准确删掉对应项,生成时要编号.点击删除按钮要反馈对应编号,然后进行删除. 现在的逻辑是:整个待展示列表(由子组件组成的数组)是个st

 一,城市选择页面路由配置                                                                                                             1. 在 router目录下 的 index.js文件中,新增路由 import City from '@/pages/city/City' { path: '/city', name: 'City', component: City } 2. 在city

前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 之前有部分订阅者咨询我,cesium加载gltf模型点击弹窗以及模型列表点击定位弹窗那些交互是怎么实现的,虽说比较简单,但是总有新手是有这块需求的.所以,今天我抽空整理一下本篇素材,简单写一下. 实现效果图如下: 大概思路如下: gltf模型的模拟数据源配置,配置gltf模型路径以及气泡窗口显示内容j

整理来自互联网- 这是tableView继承的scrollView的一个属性 scrollsToTop. 官方说明是这样的: // When the user taps the status bar, the scroll view beneath the touch which is closest to the status bar will be scrolled to top, but only if its `scrollsToTop` property is YES, its del