城市选择页列表布局

深藏阁楼爱情的钟 2022-05-24 05:06 264阅读 0赞

在码云创建分支city-list

git pull把线上分支拉倒本地

git checkout city-list 切换到分支上

npm run dev

![20180521130858359][]

创建List.vue页面，然后在city页面进行注册

当前页面 所有这个边框的颜色我都显示\#777这个颜色

![20180521132143724][]

当这么写布局时

页面不可以拖动

.button-list
      overflow :hidden
      padding:.1rem .6rem .1rem .1rem

要在github 上寻找better-scroll插件。

在cd到文件夹 输入npm install better-scroll --save

然后npm run dev

在使用时，想自己代码要符合better-scroll的代码格式。

![20180521194916524][]，它可以帮我们获取dom

![20180521195037748][]

第一步规范代码 第二步引入，第三步引入生命周期函数，当dom挂载完之后，执行。

侧边栏的制作

新建一个Alphabet.vue网页,然后引入到City.vue,可以让列表项绝对定位且内容居中

![2018052120301789][]

# flex-direction:column #

column的横竖排列

把项目提交到线上

git add .

git commit -m 'finish city css'

git checkout master

git merge city-list

git push

[20180521130858359]: /images/20220524/3babf04cf8e04b2fb3b89345f4a21233.png
[20180521132143724]: /images/20220524/740032c3c592494ba63e18a3ca40869f.png
[20180521194916524]: /images/20220524/aa89a095d28c4895bf9e9ad2d68e3ab4.png
[20180521195037748]: /images/20220524/9f2a2e2abf6a4fa78f3f6411b7e0a2c2.png
[2018052120301789]: /images/20220524/60d7a5d7517448f7ba20a4fc2c150a73.png

发表评论取消回复

表情：

评论列表（有 0 条评论，264人围观）

还没有评论，来说两句吧...

相关阅读

相关 Flutter移动电商实战 --（30）列表页_商品列表UI界面布局

小程序里面的布局方式 ![1090399-20190901184545235-1722898392.png][] 小程序的图片上这里使用的是warp布局，因为首页里面火爆专

Myth丶恋晨/ 2023年06月01日 06:04/ 0 赞/ 74 阅读

相关 uni-app之城市选择

城市选择demo 在html中 <picker mode="multiSelector" :range="cityList" :value="cityIndex"

淩亂°似流年/ 2023年02月13日 04:00/ 0 赞/ 38 阅读

相关全国市一级城市列表

最近的项目中，在注册页面中需要选择地区，花了大量的时间整理，现在也分享下吧,有需要的可以直接复制粘贴就好了: ['北京市|beijing|bj','上海市|shang

逃离我推掉我的手/ 2022年07月14日 05:56/ 0 赞/ 472 阅读

相关微信小程序实战—实现城市列表的选择

\\微信小程序实战—实现城市列表的选择 \\\\实现效果预览 ![首页][format_png] ![城市列表][format_png 1] \\\\实现功能简介

╰+攻爆jí腚メ/ 2022年06月01日 04:23/ 0 赞/ 315 阅读

相关城市选择页搜索逻辑实现

search页面。首先写一个div放搜索的结果。 ![20180522164858462][] 然后把搜索框和索索列表进行绑定 ![20

末蓝、/ 2022年05月24日 06:42/ 0 赞/ 269 阅读

相关城市选择页把左侧的字母列表和页面的字母列表联动

在码云上创建分支 city-components 然后拉到本地 git pull 在进行切换到分支，在本地分git checkout city-components

朴灿烈づ我的快乐病毒、/ 2022年05月24日 05:56/ 0 赞/ 302 阅读

相关城市选择页列表布局

在码云创建分支city-list git pull把线上分支拉倒本地 git checkout city-list 切换到分支上 npm run dev ![20180

深藏阁楼爱情的钟/ 2022年05月24日 05:06/ 0 赞/ 265 阅读

相关 jQuery_城市选择

想要做一种效果，可以实现选择一个城市点击跳到另一个选择框中 ![这里写图片描述][70] HTML结构： <div class="main">

亦凉/ 2022年05月21日 00:18/ 0 赞/ 410 阅读

相关 Vue2.5学习笔记 8.7城市列表页新能优化

主要优化2个方面 1. 反复计算顶部与A字母标签的距离这个抽取出来只在页面加载的时候计算一次即可 data () { return {

雨点打透心脏的1/2处/ 2022年02月25日 08:24/ 0 赞/ 269 阅读

相关 uniapp-城市选择插件

下载地址https://ext.dcloud.net.cn/plugin?id=115 使用： 1.将这5个文件夹放入component目录下 ![在这里插入图片描

电玩女神/ 2022年02月14日 01:54/ 0 赞/ 1026 阅读