위 챗 애플 릿 은 자모 에 따라 도시 기능 을 선택 하 는 것 을 실현 한다.
프로젝트 캡 처
다음은 코드 를 정리 하 겠 습 니 다.
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}}
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;
}
pages->index 폴 더 에서 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 파일 을 만 듭 니 다.구체 적 인 코드 는 다음 과 같 습 니 다.
var city = {
"City": [
{
" ": [
{
"name": " ",
"key": " "
},
{
"name": " ",
"key": " "
},
{
"name": " ",
"key": " "
},
{
"name": " ",
"key": " "
},
{
"name": " ",
"key": " "
},
{
"name": " ",
"key": " "
},
{
"name": " ",
"key": " "
},
{
"name": " ",
"key": " "
},
{
"name": " ",
"key": " "
},
{
"name": " ",
"key": " "
},
{
"name": " ",
"key": " "
},
{
"name": " ",
"key": " "
}
],
"A": [
{
"name": " ",
"key": "A"
},
{
"name": " ",
"key": "A"
},
{
"name": " ",
"key": "A"
},
{
"name": " ",
"key": "A"
},
{
"name": " ",
"key": "A"
},
{
"name": " ",
"key": "A"
}
,
{
"name": " ",
"key": "A"
}
,
{
"name": " ",
"key": "A"
}
,
{
"name": " ",
"key": "A"
}
],
"B": [
{
"name": " ",
"key": "B"
},
{
"name": " ",
"key": "B"
},
{
"name": " ",
"key": "B"
},
{
"name": " ",
"key": "B"
},
{
"name": " ",
"key": "B"
},
{
"name": " ",
"key": "B"
},
{
"name": " ",
"key": "B"
}
,
{
"name": " ",
"key": "B"
}
,
{
"name": " ",
"key": "B"
}
,
{
"name": " ",
"key": "B"
}
,
{
"name": " ",
"key": "B"
}
,
{
"name": " ",
"key": "B"
}
,
{
"name": " ",
"key": "B"
}
,
{
"name": " ",
"key": "B"
}
],
"C": [
{
"name": " ",
"key": "C"
},
{
"name": " ",
"key": "C"
},
{
"name": " ",
"key": "C"
},
{
"name": " ",
"key": "C"
},
{
"name": " ",
"key": "C"
},
{
"name": " ",
"key": "C"
},
{
"name": " ",
"key": "C"
}
,
{
"name": " ",
"key": "C"
}
,
{
"name": " ",
"key": "C"
}
,
{
"name": " ",
"key": "C"
}
,
{
"name": " ",
"key": "C"
}
,
{
"name": " ",
"key": "C"
}
,
{
"name": " ",
"key": "C"
}
,
{
"name": " ",
"key": "C"
}
,
{
"name": " ",
"key": "C"
}
,
{
"name": " ",
"key": "C"
}
,
{
"name": " ",
"key": "C"
}
,
{
"name": " ",
"key": "C"
}
,
{
"name": " ",
"key": "C"
}
],
"D": [
{
"name": " ",
"key": "D"
},
{
"name": " ",
"key": "D"
},
{
"name": " ",
"key": "D"
},
{
"name": " ",
"key": "D"
},
{
"name": " ",
"key": "D"
},
{
"name": " ",
"key": "D"
},
{
"name": " ",
"key": "D"
}
,
{
"name": " ",
"key": "D"
}
,
{
"name": " ",
"key": "D"
}
,
{
"name": " ",
"key": "D"
}
,
{
"name": " ",
"key": "D"
}
,
{
"name": " ",
"key": "D"
}
,
{
"name": " ",
"key": "D"
}
],
"E": [
{
"name": " ",
"key": "E"
}
,
{
"name": " ",
"key": "E"
}
,
{
"name": " ",
"key": "E"
}
],
"F": [
{
"name": " ",
"key": "F"
}
,
{
"name": " ",
"key": "F"
}
,
{
"name": " ",
"key": "F"
}
,
{
"name": " ",
"key": "F"
}
,
{
"name": " ",
"key": "F"
}
,
{
"name": " ",
"key": "F"
}
,
{
"name": " ",
"key": "F"
}
]
,
"G": [
{
"name": " ",
"key": "G"
},
{
"name": " ",
"key": "G"
},
{
"name": " ",
"key": "G"
},
{
"name": " ",
"key": "G"
},
{
"name": " ",
"key": "G"
},
{
"name": " ",
"key": "G"
},
{
"name": " ",
"key": "G"
}
,
{
"name": " ",
"key": "G"
}
,
{
"name": " ",
"key": "G"
}
,
{
"name": " ",
"key": "G"
}
],
"H": [
{
"name": " ",
"key": "H"
},
{
"name": " ",
"key": "H"
},
{
"name": " ",
"key": "H"
},
{
"name": " ",
"key": "H"
},
{
"name": " ",
"key": "H"
},
{
"name": " ",
"key": "H"
},
{
"name": " ",
"key": "H"
}
,
{
"name": " ",
"key": "H"
}
,
{
"name": " ",
"key": "H"
}
,
{
"name": " ",
"key": "H"
}
,
{
"name": " ",
"key": "H"
}
,
{
"name": " ",
"key": "H"
}
,
{
"name": " ",
"key": "H"
}
,
{
"name": " ",
"key": "H"
}
,
{
"name": " ",
"key": "H"
}
,
{
"name": " ",
"key": "H"
}
,
{
"name": " ",
"key": "H"
}
,
{
"name": " ",
"key": "H"
}
,
{
"name": " ",
"key": "H"
}
,
{
"name": " ",
"key": "H"
}
,
{
"name": " ",
"key": "H"
}
,
{
"name": " ",
"key": "H"
}
,
{
"name": " ",
"key": "H"
}
,
{
"name": " ",
"key": "H"
}
,
{
"name": " ",
"key": "H"
}
,
{
"name": " ",
"key": "H"
},
{
"name": " ",
"key": "H"
},
{
"name": " ",
"key": "H"
},
{
"name": " ",
"key": "H"
},
{
"name": " ",
"key": "H"
},
{
"name": " ",
"key": "H"
}
,
{
"name": " ",
"key": "H"
}
],
"J": [
{
"name": " ",
"key": "J"
},
{
"name": " ",
"key": "J"
},
{
"name": " ",
"key": "J"
},
{
"name": " ",
"key": "J"
},
{
"name": " ",
"key": "J"
},
{
"name": " ",
"key": "J"
},
{
"name": " ",
"key": "J"
}
,
{
"name": " ",
"key": "J"
}
,
{
"name": " ",
"key": "J"
}
,
{
"name": " ",
"key": "J"
}
,
{
"name": " ",
"key": "J"
}
,
{
"name": " ",
"key": "J"
}
,
{
"name": " ",
"key": "J"
}
,
{
"name": " ",
"key": "J"
}
,
{
"name": " ",
"key": "J"
}
,
{
"name": " ",
"key": "J"
}
,
{
"name": " ",
"key": "J"
}
,
{
"name": " ",
"key": "J"
}
,
{
"name": " ",
"key": "J"
}
,
{
"name": " ",
"key": "J"
}
]
,
"K": [
{
"name": " ",
"key": "K"
}
,
{
"name": " ",
"key": "K"
}
]
,
"L": [
{
"name": " ",
"key": "L"
},
{
"name": " ",
"key": "L"
},
{
"name": " ",
"key": "L"
},
{
"name": " ",
"key": "L"
},
{
"name": " ",
"key": "L"
},
{
"name": " ",
"key": "L"
},
{
"name": " ",
"key": "L"
}
,
{
"name": " ",
"key": "L"
}
,
{
"name": " ",
"key": "L"
}
,
{
"name": " ",
"key": "L"
}
,
{
"name": " ",
"key": "L"
}
,
{
"name": " ",
"key": "L"
}
,
{
"name": " ",
"key": "L"
}
,
{
"name": " ",
"key": "L"
}
,
{
"name": " ",
"key": "L"
}
,
{
"name": " ",
"key": "L"
}
,
{
"name": " ",
"key": "L"
}
,
{
"name": " ",
"key": "L"
}
,
{
"name": " ",
"key": "L"
}
,
{
"name": " ",
"key": "L"
}
,
{
"name": " ",
"key": "L"
}
,
{
"name": " ",
"key": "L"
}
,
{
"name": " ",
"key": "L"
}
,
{
"name": " ",
"key": "L"
}
,
{
"name": " ",
"key": "L"
}
,
{
"name": " ",
"key": "L"
},
{
"name": " ",
"key": "L"
},
{
"name": " ",
"key": "L"
}
],
"M": [
{
"name": " ",
"key": "M"
}
,
{
"name": " ",
"key": "M"
}
,
{
"name": " ",
"key": "M"
}
,
{
"name": " ",
"key": "M"
}
,
{
"name": " ",
"key": "M"
}
,
{
"name": " ",
"key": "M"
}
],
"N": [
{
"name": " ",
"key": "N"
},
{
"name": " ",
"key": "N"
},
{
"name": " ",
"key": "N"
},
{
"name": " ",
"key": "N"
},
{
"name": " ",
"key": "N"
},
{
"name": " ",
"key": "N"
},
{
"name": " ",
"key": "N"
}
,
{
"name": " ",
"key": "N"
}
,
{
"name": " ",
"key": "N"
}
,
{
"name": " ",
"key": "N"
}
,
{
"name": " ",
"key": "N"
}
],
"P": [
{
"name": " ",
"key": "P"
}
,
{
"name": " ",
"key": "P"
}
,
{
"name": " ",
"key": "P"
}
,
{
"name": " ",
"key": "P"
}
,
{
"name": " ",
"key": "P"
}
,
{
"name": " ",
"key": "P"
}
,
{
"name": " ",
"key": "P"
}
],
"Q": [
{
"name": " ",
"key": "Q"
},
{
"name": " ",
"key": "Q"
},
{
"name": " ",
"key": "Q"
},
{
"name": " ",
"key": "Q"
},
{
"name": " ",
"key": "Q"
},
{
"name": " ",
"key": "Q"
},
{
"name": " ",
"key": "Q"
}
,
{
"name": " ",
"key": "Q"
}
,
{
"name": " ",
"key": "Q"
}
,
{
"name": " ",
"key": "Q"
}
,
{
"name": " ",
"key": "Q"
}
,
{
"name": " ",
"key": "Q"
}
],
"R": [
{
"name": " ",
"key": "R"
},
{
"name": " ",
"key": "R"
}
]
,
"S": [
{
"name": " ",
"key": "S"
},
{
"name": " ",
"key": "S"
},
{
"name": " ",
"key": "S"
},
{
"name": " ",
"key": "S"
},
{
"name": " ",
"key": "S"
},
{
"name": " ",
"key": "S"
},
{
"name": " ",
"key": "S"
}
,
{
"name": " ",
"key": "S"
}
,
{
"name": " ",
"key": "S"
}
,
{
"name": " ",
"key": "S"
}
,
{
"name": " ",
"key": "S"
}
,
{
"name": " ",
"key": "S"
}
,
{
"name": " ",
"key": "S"
}
,
{
"name": " ",
"key": "S"
}
,
{
"name": " ",
"key": "S"
}
,
{
"name": " ",
"key": "S"
}
,
{
"name": " ",
"key": "S"
}
,
{
"name": " ",
"key": "S"
}
,
{
"name": " ",
"key": "S"
}
,
{
"name": " ",
"key": "S"
}
,
{
"name": " ",
"key": "S"
}
,
{
"name": " ",
"key": "S"
}
,
{
"name": " ",
"key": "S"
}
,
{
"name": " ",
"key": "S"
}
,
{
"name": " ",
"key": "S"
}
,
{
"name": " ",
"key": "S"
}
],
"T": [
{
"name": " ",
"key": "T"
},
{
"name": " ",
"key": "T"
},
{
"name": " ",
"key": "T"
},
{
"name": " ",
"key": "T"
},
{
"name": " ",
"key": "T"
},
{
"name": " ",
"key": "T"
},
{
"name": " ",
"key": "T"
}
,
{
"name": " ",
"key": "T"
}
,
{
"name": " ",
"key": "T"
}
,
{
"name": " ",
"key": "T"
}
,
{
"name": " ",
"key": "T"
}
,
{
"name": " ",
"key": "T"
}
,
{
"name": " ",
"key": "T"
}
]
,
"W": [
{
"name": " ",
"key": "W"
},
{
"name": " ",
"key": "W"
},
{
"name": " ",
"key": "W"
},
{
"name": " ",
"key": "W"
},
{
"name": " ",
"key": "W"
},
{
"name": " ",
"key": "W"
},
{
"name": " ",
"key": "W"
}
,
{
"name": " ",
"key": "W"
}
,
{
"name": " ",
"key": "W"
}
,
{
"name": " ",
"key": "W"
}
,
{
"name": " ",
"key": "W"
}
,
{
"name": " ",
"key": "W"
}
],
"X": [
{
"name": " ",
"key": "X"
},
{
"name": " ",
"key": "X"
},
{
"name": " ",
"key": "X"
},
{
"name": " ",
"key": "X"
},
{
"name": " ",
"key": "X"
},
{
"name": " ",
"key": "X"
},
{
"name": " ",
"key": "X"
}
,
{
"name": " ",
"key": "X"
}
,
{
"name": " ",
"key": "X"
}
,
{
"name": " ",
"key": "X"
}
,
{
"name": " ",
"key": "X"
}
,
{
"name": " ",
"key": "X"
}
,
{
"name": " ",
"key": "X"
}
,
{
"name": " ",
"key": "X"
}
,
{
"name": " ",
"key": "X"
}
,
{
"name": " ",
"key": "X"
}
,
{
"name": " ",
"key": "X"
}
,
{
"name": " ",
"key": "X"
}
,
{
"name": " ",
"key": "X"
}
,
{
"name": " ",
"key": "X"
}
,
{
"name": " ",
"key": "X"
}
]
,
"Y": [
{
"name": " ",
"key": "Y"
},
{
"name": " ",
"key": "Y"
},
{
"name": " ",
"key": "Y"
},
{
"name": " ",
"key": "Y"
},
{
"name": " ",
"key": "Y"
},
{
"name": " ",
"key": "Y"
},
{
"name": " ",
"key": "Y"
}
,
{
"name": " ",
"key": "Y"
}
,
{
"name": " ",
"key": "Y"
}
,
{
"name": " ",
"key": "Y"
}
,
{
"name": " ",
"key": "Y"
}
,
{
"name": " ",
"key": "Y"
}
,
{
"name": " ",
"key": "Y"
}
,
{
"name": " ",
"key": "Y"
}
,
{
"name": " ",
"key": "Y"
}
,
{
"name": " ",
"key": "Y"
}
,
{
"name": " ",
"key": "Y"
}
,
{
"name": " ",
"key": "Y"
}
,
{
"name": " ",
"key": "Y"
}
,
{
"name": " ",
"key": "Y"
}
,
{
"name": " ",
"key": "Y"
}
,
{
"name": " ",
"key": "Y"
}
],
"Z": [
{
"name": " ",
"key": "Z"
},
{
"name": " ",
"key": "Z"
},
{
"name": " ",
"key": "Z"
},
{
"name": " ",
"key": "Z"
},
{
"name": " ",
"key": "Z"
},
{
"name": " ",
"key": "Z"
},
{
"name": " ",
"key": "Z"
}
,
{
"name": " ",
"key": "Z"
}
,
{
"name": " ",
"key": "Z"
}
,
{
"name": " ",
"key": "Z"
}
,
{
"name": " ",
"key": "Z"
}
,
{
"name": " ",
"key": "Z"
}
,
{
"name": " ",
"key": "Z"
}
,
{
"name": " ",
"key": "Z"
}
,
{
"name": " ",
"key": "Z"
}
,
{
"name": " ",
"key": "Z"
}
,
{
"name": " ",
"key": "Z"
}
,
{
"name": " ",
"key": "Z"
}
,
{
"name": " ",
"key": "Z"
}
,
{
"name": " ",
"key": "Z"
}
,
{
"name": " ",
"key": "Z"
}
,
{
"name": " ",
"key": "Z"
}
,
{
"name": " ",
"key": "Z"
}
,
{
"name": " ",
"key": "Z"
}
,
{
"name": " ",
"key": "Z"
}
,
{
"name": " ",
"key": "Z"
},
{
"name": " ",
"key": "Z"
},
{
"name": " ",
"key": "Z"
},
{
"name": " ",
"key": "Z"
},
{
"name": " ",
"key": "Z"
},
{
"name": " ",
"key": "Z"
}
,
{
"name": " ",
"key": "Z"
}
,
{
"name": " ",
"key": "Z"
}
,
{
"name": " ",
"key": "Z"
}
,
{
"name": " ",
"key": "Z"
}
,
{
"name": " ",
"key": "Z"
},
{
"name": " ",
"key": "Z"
},
{
"name": " ",
"key": "Z"
},
{
"name": " ",
"key": "Z"
},
{
"name": " ",
"key": "Z"
},
{
"name": " ",
"key": "Z"
}
]
}
]
}
module.exports = city;이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
OpenSSL 생 성 ssl 인증서텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
