移动端四级地址选择组件开发

地址选择组件的开发,每一项都做好了注释,便于理解。组件在结构上分为两个部分,如图

html 

<div class="address-dialog-con">
          <!-- <span class="loading" v-if="loading"><i></i></span> -->
          <ul class="con-select">
            <li :class="showProvince?'active':''" @click="getArea('showProvince')">{{province}}</li>
            <li :class="showCity?'active':''" v-if="choiceCity" @click="getArea('showCity')">{{city}}</li>
            <li :class="showCounty?'active':''" v-if="choiceCounty" @click="getArea('showCounty')">{{county}}</li>
            <li :class="showTown?'active':''" v-if="choiceTown" @click="getArea('showTown')">{{town}}</li>
          </ul>
          <!-- 省列 -->
          <transition name="fade">
            <ul class="address-province area clearfix" v-if="showProvince">
              <li v-for="item in base.provinceArr" @click="getCity(item.id,item.name)" :class="item.name === province ? 'selected' : ''" :key="item.id">
                {{item.name}}<i v-if="item.name === province"></i>
              </li>
            </ul>
          </transition>
          <!-- 市列 -->
          <transition name="fade">
            <ul class="address-city area clearfix" v-if="showCity">
              <li v-for="item in base.cityArr" @click="getCounty(item.id,item.name)" :class="item.name === city ? 'selected' : ''" :key="item.id">
                {{item.name}}<i v-if="item.name === city"></i>
              </li>
            </ul>
          </transition>
          <!-- 区列 -->
          <transition name="fade">
            <ul class="address-county area clearfix" v-if="showCounty">
              <li v-for="item in base.countyArr" @click="getTown(item.id,item.name)" :class="item.name === county ? 'selected' : ''" :key="item.id">
                {{item.name}}<i v-if="item.name === county"></i>
              </li>
            </ul>
          </transition>
          <!-- 县列 -->
          <transition name="fade">
            <ul class="address-town area clearfix" v-if="showTown">
              <li v-for="item in base.townArr" :key="item.id" @click="getLast(item.id,item.name)">
                {{item.name}}<i v-if="item.name === town"></i>
              </li>
            </ul>
          </transition>
        </div>

其中con-select中存放是的图片中第一部分,下面的四个ul存放的是省市区镇的数据。点击“请选择”的时候需要平滑移动的效果,所以对下面四个ul用到了transition,具体用法可见vue官方教程。

data数据

data () {
    return {
      areaState: areaHandle.state, // 从组件内引入的地址所有数据,有缓存
      loading: false,
      address: {}, // 选中的省市区县
      show: false,
      province: '请选择', // 选择的省名称
      provinceId: undefined,
      city: '请选择', // 选择的市名称
      cityId: undefined,
      county: '请选择', // 选择的区名称
      countyId: undefined,
      town: '请选择', // 最后一级请选择
      townId: undefined,
      choiceProvince: false, // 省按钮的显示隐藏
      choiceCity: false, // 市按钮的显示隐藏
      choiceCounty: false, // 区按钮的显示隐藏
      choiceTown: false, // 镇按钮的显示隐藏
      showProvince: true, // 显示省列
      showCity: false, // 显示市列
      showCounty: false, // 显示区列
      showTown: false // 显示镇列
    }
  }

方法

computed: {
  methods: {
    // 点击tab
    getArea (k) {
      ['showCity', 'showCounty', 'showTown', 'showProvince'].forEach(e => { this[e] = false })
      this[k] = true
    },
    // 点击选择省后
    async getCity (pid, pname) {
      this.province = pname // 选中的省
      this.provinceId = pid
      this.showProvince = false // 省列消失
      this.choiceCity = true // 显示市按钮
      this.showCity = true // 显示市列
      this.city = '请选择'
      this.choiceCounty = false // 隐藏区(非第一次选择)
      this.choiceTown = false // 隐藏镇(非第一次选择)
    },
    // 点击选择市后
    async getCounty (cid, cname) {
      this.city = cname // 选中的市
      this.cityId = cid
      this.showCity = false // 市列消失
      this.choiceCounty = true // 显示区按钮
      this.showCounty = true // 显示区列
      this.county = '请选择'
      this.choiceTown = false // 隐藏镇(非第一次选择)
    },
    // 点击选择区后
    async getTown (coid, coname) {
      this.county = coname // 选中的区
      this.countyId = coid
      // 需要判断有没有四级地址,如果请求失败,走catch的部分,直接到此为止。如果请求成功,则显示四级地址
      try {
        await areaHandle.cacheArea('town', coid)
        this.showCounty = false // 区列消失
        this.showTown = true // 显示镇列
        this.choiceTown = true // 显示镇按钮
      } catch (error) {
        this.town = ''
        this.townId = undefined
        this.upData()
      }
    },
    // 点击选择镇后
    getLast (tid, tname) {
      this.town = tname
      this.townId = tid
      this.upData()
    },
    // 传值给父组件
    upData () {
      let addressNew = {
        province: this.province,
        city: this.city,
        county: this.county,
        town: this.town,
        provinceId: this.provinceId,
        cityId: this.cityId,
        countyId: this.countyId,
        townId: this.townId
      }
      Object.assign(this.address, addressNew)
      this.$emit('address', this.address) // 选中的值传给父组件
      this.show = false
    },
    // 关闭
    close () {
      this.show = false
    }
  }

其中每次点击选择的时候要调取接口获得数据,例如点击省获得市的数据,点击市获得区的数据,这部分的方法隐藏,可根据自己需要的情况适当的添加。

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,以下是一套移动端开发试卷及答案: 一、选择题(每题2分,共20分) 1.下列哪个不是移动端开发需要注意的事项? A.适配屏幕尺寸 B.考虑网络环境 C.考虑性能优化 D.不用考虑用户体验 答案:D 2.以下哪个不是Android系统提供的四大组件? A.服务(Service) B.广播(BroadcastReceiver) C.活动(Activity) D.模块(Module) 答案:D 3.以下哪个不是移动端开发中常用的开发语言? A.Java B.Objective-C C.Python D.Swift 答案:C 4.以下哪个不是Android系统提供的存储方式? A.文件存储 B.数据库存储 C.SharedPreferences存储 D.网络存储 答案:D 5.以下哪个不是移动端应用的运行状态? A.前台运行 B.后台运行 C.暂停状态 D.休眠状态 答案:D 6.以下哪个不是Android系统提供的布局方式? A.LinearLayout B.RelativeLayout C.FrameLayout D.GridLayout 答案:D 7.以下哪个不是Android系统提供的调试工具? A.Android Studio B.ADB C.Dalvik虚拟机 D.Logcat 答案:C 8.以下哪个不是移动端应用中常用的通信方式? A.HTTP B.TCP C.UDP D.SMTP 答案:D 9.以下哪个不是移动端应用的常用UI组件? A.Button B.TextView C.ProgressBar D.FileChooser 答案:D 10.以下哪个不是移动端应用中常用的数据存储方式? A.SharedPreferences B.SQLite数据库 C.文件存储 D.网络存储 答案:D 二、填空题(每题3分,共15分) 1.移动端开发中,__________是一种适配不同屏幕尺寸的方式。 答案:响应式布局 2.Android系统中,__________是一个用于存储数据的轻量级文件存储方式。 答案:SharedPreferences 3.在Android系统中,__________用于向其他组件发送广播。 答案:广播(BroadcastReceiver) 4.在Android系统中,__________用于启动其他组件。 答案:意图(Intent) 5.在移动端应用中,__________用于将数据从服务器传输到客户端。 答案:HTTP协议 三、简答题(每题10分,共20分) 1.请简述Android系统中四大组件的作用。 答案:四大组件分别是Activity、Service、BroadcastReceiver、ContentProvider。Activity是应用程序的界面,管理着用户与应用程序之间的交互;Service是后台运行的组件,不与用户交互,主要用于处理一些耗时操作;BroadcastReceiver是用于接收系统或应用程序发出的广播消息,可以用于实现一些事件的处理;ContentProvider是用于实现不同应用程序之间数据共享的组件。 2.请简述移动端应用中数据存储方式的优缺点,并给出适用场景。 答案:数据存储方式包括SharedPreferences、SQLite数据库、文件存储、网络存储等。SharedPreferences适合存储一些小数据量的键值对,读写速度快,但不适合存储大数据量;SQLite数据库适合存储结构化数据,具有较好的查询性能,但需要编写SQL语句;文件存储适合存储一些非结构化数据,如图片、音频、视频等,但不适合存储大数据量;网络存储适合将数据存储在远程服务器上,可以实现数据共享,但需要考虑网络环境和数据安全问题。 四、编程题(每题20分,共40分) 1.请编写一段Java代码,实现将一个字符串反转输出。 答案: ```java public class ReverseString { public static void main(String[] args) { String str = "Hello World!"; StringBuilder sb = new StringBuilder(str); String reversedStr = sb.reverse().toString(); System.out.println(reversedStr); } } ``` 2.请编写一款简单的Android应用程序,包含一个按钮和一个文本框。点击按钮后,文本框内显示“Hello World!”。 答案:在XML布局文件中添加一个Button和一个TextView,设置它们的属性;在Java代码中添加事件监听器,点击按钮后修改TextView的文本内容。 布局文件代码: ```xml <Button android:id="@+id/button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Click me"/> <TextView android:id="@+id/textView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text=""/> ``` Java代码: ```java public class MainActivity extends AppCompatActivity { private Button button; private TextView textView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); button = findViewById(R.id.button); textView = findViewById(R.id.textView); button.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { textView.setText("Hello World!"); } }); } } ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值