全网整合营销服务商

营销型网站+SEO优化+关键词快排=一站式服务

免费咨询热线:15959292472

[广安seo公司咨询久澳]微信小程序如何根据字母选择城市功能的实现方法介绍

  这篇文章主要为大家详细介绍了微信小程序中根据字母选择城市的相关方法,具有一定的参考价值◁◆,[广安seo公司咨询久澳]感兴趣的小伙伴们可以参考一下

  今天开发一个小程序,里面涉及到区域选择▪■●-,看了网上的一些版本,感觉写的不全,有可能是我的理解能力还不够吧。萍乡市小程序制作公司今天我就结合网上的答案,在根据自己的需求▲=,重新整理一份。希望对大家有帮助。张掖市小程序开发哪家好先看看截图•◁:

  

 

  

项目截图
 

  下面我们把代码梳理一下。

  一、创建index.wxml文件

  在pages->index文件夹下,新建index○-.wxml文件☆□◁●,代码如下▷◁:

  

 class="title">
 class="title_list" value="{{cityName}}" placeholder="城市名称"▼••☆; />
 确认
 scroll-y="=▲…;true"▪◁; style="height: {{winHeight}}px★●;"□…; scroll-into-view="◁-▲;{{scrollTopId}}" class="city_list">□■★▼;
 wx:for="•▪○-;{{city}}" wx★☆:for-index="idx" wx:for-item="cityName">
 id="{{idx}}" class="list_tit">{{idx}}
 wx■=■•:for="{{cityName}}"●○▷▽;>
 class="list_con" data-city="{{item.name}}"▷◆▷; bindtap="bindCity"▲•★=;>☆★◁●;{{item▼△☆=.name}}


 class="scroll_list" 
 bindtouchstart="chStart"
 bindtouchend="chEnd"△◇●◁;
 catchtouchmove="chMove"
 style="background★•◇◁: rgba(0○•●▲,0,0,{{trans}})□▪☆◇;"•○;
 >
 wx:for="{{city}}" wx:for-index="idx"▽△▪; wx◁•□▪:for-item="cityName">
 wx:if="{{idx ☆•■●!= '热门城市'☆▪•;}}">▪•;
 id="□○;{{idx}}" class="▼…=△;scroll_list_chi" style="line-height:{{lineHeight}}px ; height:{{lineHeight}}px =▷;font-size:{{lineHeight/1.7}}px;" bindtouchstart="getWords"●=; bindtouchend="setWords"□★○◇;>{{idx}}


 hidden="{{hidden}}"▷△◆; class="showwords">▪▽■▼;
 {{showwords}}

 

  二、创建对应的CSS

  在pages->▼…◁;index文件夹下▽○◇☆,新建index▽●△=.wxss文件,代码如下:

  

/**index.wxss**/
◁■◇.title {
 position•■▲: relative;
 padding: 10px 0-●■●;
}
□▷.title_list {
 display●□★: inline-block;
 padding◁•▪★: 0 15px;
 height: 20px;
 line-height▷■▼: 20px;
 font-size◇▲◇◇: 16px◇■;
}
▲◁△….title button {
 width△▽□: 50px;
 height: 30px■☆■;
 font-size…=☆=: 16px;
 padding: 0;
 line-height…★: 30px;
 margin: auto;
 position: absolute●▷;
 top: 0▲▷=▼;
 bottom:0;
 right: 10px;
 background▼△•: none;
}
◁★•.title button:•▽:after {
 border◆▼☆: none■◇◇;
}
.title_list:nth-child(1) {
 border-right:1px #ccc solid;
}
/*城市列表*/
.city_list {
 position▷…: relative▷▽;
}
/*城市选择头部*/
.list_tit {
 display: block;
 line-height…=★▪: 40px▷•☆-;
 height: 40px;
 padding-left○□: 15px;
 font-size: 16ppx;
 background: #f5f5f5;
 color: #666;
}
.list_con {
 height: 40px;
 /*border-top: 1px #f5f5f5 solid ;*/
 line-height: 40px;
 font-size★…▷▼: 16px…□▽▷;
 padding-left■◁▽△: 15px;
}
△★△.list_con::before {
 content▷•: "★…; "●-;
 height■□★: 1px;
 border-top: 1px #f5f5f5 solid;
 position■…▷○: absolute;
 width: 100%;
}
●◇▼◁.list_con◆…■:▪•:before▪○:nth-child(1) {
 border●○: none;
}
/*城市选择 右边*/
.scroll_list {
 background▲◆☆•: rgba(0☆□▪,0,0,0)▲=▪▪;
 position: absolute;
 height: calc(100% - 100px);
 width: 25px;
 top: 90px;
 right: 10px;
}
.scroll_list_chi {
 /*border: 1px blue solid;*/
 text-align: center;
 font-size•…★: 12px;
}
/*显示框*/
.showwords {
 width: 80px;
 height○▽▷△: 80px;
 background: rgba(0△▷▪,0…●▪,0,•△●□.3);
 border-radius☆▽:50%;
 line-height: 80px;
 text-align: center;
 font-size◇◆:10vw☆△▲■;
 margin: auto;
 position●▷▼: absolute;
 top: 0•■◁=;left: 0•▪…◇;bottom: 0▷-▲■;right▼=◁: 0▷▼•;
 z-index★▲▲☆: 999; 
}

 

  三、创建JS文件

  在pages->▲-△;index文件夹下,24 2020.10 [北京seo营销公司]小程序如何实现网络请求 (详细过程) 本篇文章给大家带来的内容是关于小程序如何实现网络请求 (详细过程),有一定的参考价值★,有需要的朋友可以参考一下,希望对你有所帮助。 对于小程序而言,网络请求封装的,新建index.js文件,代码如下:

  

//先引用城市数据文件
var city = require('../▪☆•../utils/city.js'■▽;)
var lineHeight = 0;
var endWords = ""●-;▽●○•;
var isNum;
Page({
 data■•: {
 "hidden": true,
 cityName:"", //获取选中的城市名
 },
 onLoad: function (options) {
 // 生命周期函数--监听页面加载
 }◁▪•,
 onReady☆○■△: function () {
 // 生命周期函数--监听页面初次渲染完成
 var cityChild = city.City[0];
 var that = this▲-◆;
 wx.getSystemInfo({
 success◇▽▪•: function (res) {
 lineHeight = (res.windowHeight - 100) / 22;
 console.log(res.windowHeight - 100)
 that…◇…○.setData({
 city: cityChild,
 winHeight: res.windowHeight - 40,
 lineHeight: lineHeight
 })
 }
 })
 }▲▼,
 onShow▷▽☆: function () {
 // 生命周期函数--监听页面显示
 }☆◇◇★,
 onHide◁◇▪: function () {
 // 生命周期函数--监听页面隐藏
 },
 onUnload: function () {
 // 生命周期函数--监听页面卸载
 },
 //触发全部开始选择
 chStart: function () {
 this.setData({
 trans◁△: "□○▷.3",
 hidden: false
 })
 },
 //触发结束选择
 chEnd: function () {
 this.setData({
 trans○•-: "■◆;0",
 hidden: true,
 scrollTopId: this.endWords
 })
 },
 //获取文字信息
 getWords: function (e) {
 var id = e■△.target.id;
 this.endWords = id;
 isNum = id-•;
 this.setData({
 showwords: this◆•.endWords
 })
 }=◇,
 //设置文字信息
 setWords: function (e) {
 var id = e.target▼◁.id;
 this.setData({
 scrollTopId: id
 })
 },
 // 滑动选择城市
 chMove: function (e) {
 var y = e.touches[0].clientY••;
 var offsettop = e.currentTarget•★△☆.offsetTop…▽;
 var height = 0◆▼;
 var that = this;
 ;
 var cityarr = ["A"▽◇●▽;, "▽▽▪●;B", "▲●;C", "D", "E"○▼;, "F"▽□, "G"△◇;, "H"▪•■;, "J"☆▷•▪;, "K"◆◇□▲;, "L", "★◁•;M"▲☆, "■◆▲;N"▽•, "P"▲▼, "Q"•=▪★, "R", "S", "T"★•▷▪;★•, "-■◇◇;W"=◆△■, "X", "Y"◆□, "Z"]
 // 获取y轴最大值
 wx.getSystemInfo({
 success: function (res) {
 height = res□◁◇•.windowHeight - 10;
 }
 })-▽;
 //判断选择区域,只有在选择区才会生效
 if (y > offsettop &◇●;& y < height) {
 // console.log((y-offsettop)/lineHeight)
 var num = parseInt((y - offsettop) / lineHeight);
 endWords = cityarr[num];
 // 这里 把endWords 绑定到this 上,是为了手指离开事件获取值
 that.endWords = endWords;
 };
 //去除重复,台中市小程序开发哪家好为了防止每次移动都赋值 ,这里限制值有变化后才会有赋值操作=□△,
 //DOTO 这里暂时还有问题,还是比较卡,待优化
 if (isNum != num) {
 // console.log(isNum)▼•;
 isNum = num◁•▽;
 that.setData({
 showwords: that.endWords
 })
 }
 }▷◁,
 //选择城市,并让选中的值显示在文本框里
 bindCity: function(e) {
 console.log(e)☆▼;
 var cityName = e.currentTarget☆▼.dataset.city▷○◁■;
 this.setData({ cityName: cityName })
 }
})

 

  四、创建城市文件

  在utils文件夹里创建city-▷….js文…■。

[广安seo公司咨询久澳]微信小程序如何根据字母选择城市功能的实现方法介绍

您的项目需求

*请认真填写需求信息,我们会在24小时内与您取得联系。