微信小程序 通过 ThorUI 框架 实现 选择城市

于 2022-11-29 15:16:26 发布
阅读量575 收藏
点赞数 1
文章标签： 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_63281943/article/details/128098675
版权

效果图

1.文件夹新建 utils > city.js

 2.city 文件里面 放 数据 并且导出数据 

module.exports = {
  list: [{
      "letter": "A",
      "data": [{
          "name": "阿拉斯加",
          "mobile": "13588889999",
          "keyword": "阿拉斯加ABA13588889999"
        },
        {
          "name": "阿克苏",
          "mobile": "0551-4386721",
          "keyword": "阿克苏AKESU0551-4386721"
        },
        {
          "name": "阿拉善",
          "mobile": "4008009100",
          "keyword": "阿拉善ALASHAN4008009100"
        },
        {
          "name": "阿勒泰",
          "mobile": "13588889999",
          "keyword": "阿勒泰ALETAI13588889999"
        },
        {
          "name": "阿里",
          "mobile": "13588889999",
          "keyword": "阿里ALI13588889999"
        },
        {
          "name": "安阳",
          "mobile": "13588889999",
          "keyword": "13588889999安阳ANYANG"
        }
      ]
    },
    {
      "letter": "B",
      "data": [{
          "name": "白城",
          "mobile": "该主子没有留电话~",
          "keyword": "白城BAICHENG"
        },
        {
          "name": "白山",
          "mobile": "13588889999",
          "keyword": "白山BAISHAN13588889999"
        },
        {
          "name": "白银",
          "mobile": "13588889999",
          "keyword": "白银BAIYIN13588889999"
        },
        {
          "name": "保定",
          "mobile": "13588889999",
          "keyword": "保定BAODING13588889999"
        }
      ]
    },
    {
      "letter": "C",
      "data": [{
          "name": "沧州",
          "mobile": "13588889999",
          "keyword": "沧州CANGZHOU13588889999"
        },
        {
          "name": "长春",
          "mobile": "13588889999",
          "keyword": "长春CHANGCHUN13588889999"
        }
      ]
    },
    {
      "letter": "D",
      "data": [{
          "name": "大理",
          "mobile": "13588889999",
          "keyword": "大理DALI13588889999"
        },
        {
          "name": "大连",
          "mobile": "13588889999",
          "keyword": "大连DALIAN13588889999"
        }
      ]
    },
    {
      "letter": "E",
      "data": [{
          "name": "鄂尔多斯",
          "mobile": "13588889999",
          "keyword": "鄂尔多斯EERDUOSI13588889999"
        },
        {
          "name": "恩施",
          "mobile": "13588889999",
          "keyword": "恩施ENSHI13588889999"
        },
        {
          "name": "鄂州",
          "mobile": "13588889999",
          "keyword": "鄂州EZHOU13588889999"
        }
      ]
    },
    {
      "letter": "F",
      "data": [{
          "name": "防城港",
          "mobile": "该主子没有留电话~",
          "keyword": "防城港FANGCHENGGANG"
        },
        {
          "name": "抚顺",
          "mobile": "13588889999",
          "keyword": "抚顺FUSHUN13588889999"
        },
        {
          "name": "阜新",
          "mobile": "13588889999",
          "keyword": "阜新FUXIN13588889999"
        },
        {
          "name": "阜阳",
          "mobile": "13588889999",
          "keyword": "阜阳FUYANG13588889999"
        },
        {
          "name": "抚州",
          "mobile": "13588889999",
          "keyword": "抚州FUZHOU13588889999"
        },
        {
          "name": "福州",
          "mobile": "13588889999",
          "keyword": "福州FUZHOU13588889999"
        }
      ]
    },
    {
      "letter": "G",
      "data": [{
          "name": "甘南",
          "mobile": "13588889999",
          "keyword": "甘南GANNAN13588889999"
        },
        {
          "name": "赣州",
          "mobile": "13588889999",
          "keyword": "赣州GANZHOU13588889999"
        },
        {
          "name": "甘孜",
          "mobile": "13588889999",
          "keyword": "甘孜GANZI13588889999"
        }
      ]
    },
    {
      "letter": "H",
      "data": [{
          "name": "哈尔滨",
          "mobile": "13588889999",
          "keyword": "哈尔滨HAERBIN13588889999"
        },
        {
          "name": "海北",
          "mobile": "13588889999",
          "keyword": "海北HAIBEI13588889999"
        },
        {
          "name": "海东",
          "mobile": "13588889999",
          "keyword": "海东HAIDONG13588889999"
        },
        {
          "name": "海口",
          "mobile": "13588889999",
          "keyword": "海口HAIKOU13588889999"
        }
      ]
    },
    {
      "letter": "I",
      "data": [{
          "name": "ice",
          "mobile": "13588889999",
          "keyword": "佳木斯JIAMUSI13588889999"
        }

      ]
    },
    {
      "letter": "J",
      "data": [{
          "name": "佳木斯",
          "mobile": "13588889999",
          "keyword": "佳木斯JIAMUSI13588889999"
        },
        {
          "name": "吉安",
          "mobile": "13588889999",
          "keyword": "吉安JIAN13588889999"
        },
        {
          "name": "江门",
          "mobile": "13588889999",
          "keyword": "江门JIANGMEN13588889999"
        }
      ]
    },
    {
      "letter": "K",
      "data": [{
          "name": "开封",
          "mobile": "13588889999",
          "keyword": "开封KAIFENG13588889999"
        },
        {
          "name": "喀什",
          "mobile": "13588889999",
          "keyword": "喀什KASHI13588889999"
        },
        {
          "name": "克拉玛依",
          "mobile": "13588889999",
          "keyword": "克拉玛依KELAMAYI13588889999"
        }
      ]
    },
    {
      "letter": "L",
      "data": [{
          "name": "来宾",
          "mobile": "13588889999",
          "keyword": "来宾LAIBIN13588889999"
        },
        {
          "name": "兰州",
          "mobile": "13588889999",
          "keyword": "兰州LANZHOU13588889999"
        },
        {
          "name": "拉萨",
          "mobile": "13588889999",
          "keyword": "拉萨LASA13588889999"
        },
        {
          "name": "乐山",
          "mobile": "13588889999",
          "keyword": "乐山LESHAN13588889999"
        },
        {
          "name": "凉山",
          "mobile": "13588889999",
          "keyword": "凉山LIANGSHAN13588889999"
        },
        {
          "name": "连云港",
          "mobile": "13588889999",
          "keyword": "连云港LIANYUNGANG13588889999"
        },
        {
          "name": "聊城",
          "mobile": "18322223333",
          "keyword": "聊城LIAOCHENG18322223333"
        },
        {
          "name": "辽阳",
          "mobile": "18322223333",
          "keyword": "辽阳LIAOYANG18322223333"
        },
        {
          "name": "辽源",
          "mobile": "18322223333",
          "keyword": "辽源LIAOYUAN18322223333"
        },
        {
          "name": "丽江",
          "mobile": "18322223333",
          "keyword": "丽江LIJIANG18322223333"
        },
        {
          "name": "临沧",
          "mobile": "18322223333",
          "keyword": "临沧LINCANG18322223333"
        },
        {
          "name": "临汾",
          "mobile": "18322223333",
          "keyword": "临汾LINFEN18322223333"
        },
        {
          "name": "临夏",
          "mobile": "18322223333",
          "keyword": "临夏LINXIA18322223333"
        },
        {
          "name": "临沂",
          "mobile": "18322223333",
          "keyword": "临沂LINYI18322223333"
        },
        {
          "name": "林芝",
          "mobile": "18322223333",
          "keyword": "林芝LINZHI18322223333"
        },
        {
          "name": "丽水",
          "mobile": "18322223333",
          "keyword": "丽水LISHUI18322223333"
        }
      ]
    },
    {
      "letter": "M",
      "data": [{
          "name": "眉山",
          "mobile": "15544448888",
          "keyword": "眉山MEISHAN15544448888"
        },
        {
          "name": "梅州",
          "mobile": "15544448888",
          "keyword": "梅州MEIZHOU15544448888"
        },
        {
          "name": "绵阳",
          "mobile": "15544448888",
          "keyword": "绵阳MIANYANG15544448888"
        },
        {
          "name": "牡丹江",
          "mobile": "15544448888",
          "keyword": "牡丹江MUDANJIANG15544448888"
        }
      ]
    },
    {
      "letter": "N",
      "data": [{
          "name": "南昌",
          "mobile": "15544448888",
          "keyword": "南昌NANCHANG15544448888"
        },
        {
          "name": "南充",
          "mobile": "15544448888",
          "keyword": "南充NANCHONG15544448888"
        },
        {
          "name": "南京",
          "mobile": "15544448888",
          "keyword": "南京NANJING15544448888"
        },
        {
          "name": "南宁",
          "mobile": "15544448888",
          "keyword": "南宁NANNING15544448888"
        },
        {
          "name": "南平",
          "mobile": "15544448888",
          "keyword": "南平NANPING15544448888"
        }
      ]
    },
    {
      "letter": "O",
      "data": [{
        "name": "欧阳",
        "mobile": "15544448888",
        "keyword": "欧阳ouyang15544448888"
      }]
    },
    {
      "letter": "P",
      "data": [{
          "name": "盘锦",
          "mobile": "15544448888",
          "keyword": "盘锦PANJIN15544448888"
        },
        {
          "name": "攀枝花",
          "mobile": "15544448888",
          "keyword": "攀枝花PANZHIHUA15544448888"
        },
        {
          "name": "平顶山",
          "mobile": "15544448888",
          "keyword": "平顶山PINGDINGSHAN15544448888"
        },
        {
          "name": "平凉",
          "mobile": "15544448888",
          "keyword": "平凉PINGLIANG15544448888"
        },
        {
          "name": "萍乡",
          "mobile": "15544448888",
          "keyword": "萍乡PINGXIANG15544448888"
        },
        {
          "name": "普洱",
          "mobile": "15544448888",
          "keyword": "普洱PUER15544448888"
        },
        {
          "name": "莆田",
          "mobile": "15544448888",
          "keyword": "莆田PUTIAN15544448888"
        },
        {
          "name": "濮阳",
          "mobile": "15544448888",
          "keyword": "濮阳PUYANG15544448888"
        }
      ]
    },
    {
      "letter": "Q",
      "data": [{
          "name": "黔东南",
          "mobile": "15544448888",
          "keyword": "黔东南QIANDONGNAN15544448888"
        },
        {
          "name": "黔南",
          "mobile": "15544448888",
          "keyword": "黔南QIANNAN15544448888"
        },
        {
          "name": "黔西南",
          "mobile": "15544448888",
          "keyword": "黔西南QIANXINAN15544448888"
        }
      ]
    },
    {
      "letter": "R",
      "data": [{
          "name": "日喀则",
          "mobile": "15544448888",
          "keyword": "日喀则RIKAZE15544448888"
        },
        {
          "name": "日照",
          "mobile": "15544448888",
          "keyword": "日照RIZHAO15544448888"
        }
      ]
    },
    {
      "letter": "S",
      "data": [{
          "name": "三门峡",
          "mobile": "15544448888",
          "keyword": "三门峡SANMENXIA15544448888"
        },
        {
          "name": "三明",
          "mobile": "15544448888",
          "keyword": "三明SANMING15544448888"
        },
        {
          "name": "三沙",
          "mobile": "15544448888",
          "keyword": "三沙SANSHA15544448888"
        }
      ]
    },
    {
      "letter": "T",
      "data": [{
          "name": "塔城",
          "mobile": "15544448888",
          "keyword": "塔城TACHENG15544448888"
        },
        {
          "name": "漯河",
          "mobile": "15544448888",
          "keyword": "漯河TAHE15544448888"
        },
        {
          "name": "泰安",
          "mobile": "15544448888",
          "keyword": "泰安TAIAN15544448888"
        }
      ]
    },
    {
      "letter": "W",
      "data": [{
          "name": "潍坊",
          "mobile": "15544448888",
          "keyword": "潍坊WEIFANG15544448888"
        },
        {
          "name": "威海",
          "mobile": "15544448888",
          "keyword": "威海WEIHAI15544448888"
        },
        {
          "name": "渭南",
          "mobile": "15544448888",
          "keyword": "渭南WEINAN15544448888"
        },
        {
          "name": "文山",
          "mobile": "15544448888",
          "keyword": "文山WENSHAN15544448888"
        }
      ]
    },
    {
      "letter": "X",
      "data": [{
          "name": "厦门",
          "mobile": "15544448888",
          "keyword": "厦门XIAMEN15544448888"
        },
        {
          "name": "西安",
          "mobile": "15544448888",
          "keyword": "西安XIAN15544448888"
        },
        {
          "name": "湘潭",
          "mobile": "15544448888",
          "keyword": "湘潭XIANGTAN15544448888"
        }
      ]
    },
    {
      "letter": "Y",
      "data": [{
          "name": "雅安",
          "mobile": "15544448888",
          "keyword": "雅安YAAN15544448888"
        },
        {
          "name": "延安",
          "mobile": "15544448888",
          "keyword": "延安YANAN15544448888"
        },
        {
          "name": "延边",
          "mobile": "15544448888",
          "keyword": "延边YANBIAN15544448888"
        },
        {
          "name": "盐城",
          "mobile": "15544448888",
          "keyword": "盐城YANCHENG15544448888"
        }
      ]
    },
    {
      "letter": "Z",
      "data": [{
          "name": "枣庄",
          "mobile": "15544448888",
          "keyword": "枣庄ZAOZHUANG15544448888"
        },
        {
          "name": "张家界",
          "mobile": "15544448888",
          "keyword": "张家界ZHANGJIAJIE15544448888"
        },
        {
          "name": "张家口",
          "mobile": "15544448888",
          "keyword": "张家口ZHANGJIAKOU15544448888"
        }
      ]
    }, {
      "letter": "well",
      "data": [{
        "name": "☆echo.",
        "mobile": "16666666666",
        "keyword": "echo16666666666"
      }]
    },
  ]
}

3. 开始 页面 

3.1 wxml

<view class="page">
  <scroll-view class="scrollList" scroll-y scroll-into-view="{{scrollViewId}}" style="height:{{winHeight}}px">
    <view class="search-bar">
      <view class="search-bar-form">
        <view class="search-bar-box">
          <icon class="icon-search-in-box" type="search" size="16"></icon>
          <input confirm-type="search" class="search-bar-input" placeholder="请输入搜索关键词" placeholder-class="phcolor" value="{{inputVal}}"  bindinput="inputTyping" bindconfirm="searchCity"/>
          <view class="icon-clear" wx:if="{{inputShowed}}" bindtap="clearInput">
            <icon type="clear" size="15"></icon>
          </view>
        </view>
      </view>
       <button class="btn-primary" hover-class="btn-hover" bindtap="searchCity">搜索</button>
    </view>
    <view class="tui-list search-result" wx:if="{{inputShowed}}">
      <view class="tui-list-cell" hover-class="tui-list-cell-hover" wx:for="{{searchResult}}"  wx:key="index" bindtap="selectCity" data-name="{{item}}" hover-stay-time='150' >
        <view class="tui-list-cell-navigate">
           <image src="../../static/images/news/{{(index%2===0 && index!==0)?'avatar_2.jpg':'avatar_1.jpg'}}" class="img"></image>
              <view class="content">
               <view class="title">{{item.name}}</view>
               <view class="sub-title">{{item.mobile}}</view>
              </view>
        </view>
      </view>
    </view>
    <view wx:if="{{!inputShowed}}">
      <view class="tui-list city-list">
        <block wx:for="{{lists}}" wx:key="index" wx:for-item="list" wx:if="{{list.data[0]}}">
          <view class="tui-list-cell-divider" id="{{list.letter}}">
            {{list.letter=="well"?'#':list.letter}}
          </view>
          <view class="tui-list-cell" hover-class="tui-list-cell-hover" wx:for="{{list.data}}"  wx:key="index" bindtap="selectCity" data-name="{{item.name}}" hover-stay-time='150'>
            <view class="tui-list-cell-navigate {{list.data.length-1==index?'last':''}}" >
             <image src="../../static/images/news/{{(index%2===0 && index!==0)?'avatar_1.jpg':'avatar_2.jpg'}}" class="img"></image>
              <view class="content">
               <view class="title">{{item.name}}</view>
               <view class="sub-title">{{item.mobile}}</view>
              </view>

            </view>
          </view>
        </block>
      </view>
    </view>
  </scroll-view>
  <view class="tui-indexed-list-bar" style="height:{{indexBarHeight}}px" catchtouchstart="touchStart" catchtouchmove="touchMove" catchtouchend="touchEnd" catchtouchcancel="touchCancel" wx:if="{{!inputShowed}}">
    <text wx:for="{{lists}}"  wx:key="index" wx:for-item="items" class="tui-indexed-list-text" style="height:{{indexBarItemHeight}}px">
				{{items.letter=="well"?'#':items.letter}}
			</text>
  </view>
  <view class="tui-indexed-list-alert" wx:if="{{touchmove && lists[touchmoveIndex].letter}}">
    {{lists[touchmoveIndex].letter=="well"?"#":lists[touchmoveIndex].letter}}
  </view>
</view>

3.2 js

const cityData = require('../../utils/index.list.js')
Page({
  data: {
    lists: [],
    touchmove: false, // 是否在索引表上滑动
    touchmoveIndex: -1,
    titleHeight: 0, // A字距离窗口顶部的高度
    indexBarHeight: 0, // 索引表高度
    indexBarItemHeight: 0, // 索引表子项的高度
    scrollViewId: '', // scroll-view滚动到的子元素的id
    winHeight: 0,
    inputShowed: false, // 输入框是否显示
    inputVal: '', // 搜索框输入的内容
    searchResult: [],// 搜索结果
  },
  onLoad: function (options) {
    const that = this;
    setTimeout(() => {
      wx.getSystemInfo({
        success: function (res) {
          let winHeight = res.windowHeight
          let barHeight = winHeight - res.windowWidth / 750 * 204
          that.setData({
            winHeight: winHeight,
            indexBarHeight: barHeight,
            indexBarItemHeight: barHeight / 25,
            titleHeight: res.windowWidth / 750 * 132,
            lists: cityData.list
          })
        }
      })
    }, 50)
  },
  clearInput() {
    this.setData({
      inputVal: "",
      inputShowed: false,
      searchResult: []
    })
    wx.hideKeyboard() //强行隐藏键盘
  },
  inputTyping(e) {
    this.setData({
      inputVal: e.detail.value
    }, () => {
      //输入即搜索
      //this.searchCity()
    })
  },
  // 搜索城市
  searchCity() {
    if (!this.data.inputVal){
      wx.showToast({
        title: '请输入搜索关键词',
        icon:"none"
      })
      return
    }
    let result = []
    cityData.list.forEach((item1, index1) => {
      item1.data.forEach((item2, index2) => {
        if (item2.keyword.indexOf(this.data.inputVal.toLocaleUpperCase()) !== -1) {
          result.push({
            name: item2.name,
            mobile: item2.mobile
          })
        }
      })
    })
    this.setData({
      inputShowed: true,
      searchResult: result
    })
  },
  // 选择城市
  selectCity(e) {
    //let name = e.currentTarget.dataset.name;
    //返回并刷新上一页面
    // let pages = getCurrentPages();
    // let prePage = pages[pages.length - 2];
    // prePage.emit(name)
    // wx.navigateBack({
    //   delta: 1
    // })
  },
  touchStart(e) {
    this.setData({
      touchmove: true
    })
    let pageY = e.touches[0].pageY
    let index = Math.floor((pageY - this.data.titleHeight) / this.data.indexBarItemHeight)
    let item = this.data.lists[index]
    if (item) {
      this.setData({
        scrollViewId: item.letter,
        touchmoveIndex: index
      })
    }
  },
  touchMove(e) {
    let pageY = e.touches[0].pageY;
    let index = Math.floor((pageY - this.data.titleHeight) / this.data.indexBarItemHeight)
    let item = this.data.lists[index]
    if (item) {
      this.setData({
        scrollViewId: item.letter,
        touchmoveIndex: index
      })
      //console.log(index)
    }
  },
  touchEnd() {
    this.setData({
      touchmove: false,
      touchmoveIndex: -1
    })
  },
  touchCancel() {
    this.setData({
      touchmove: false,
      touchmoveIndex: -1
    })
  }
})

3.3 json

{
  "navigationBarTitleText": "索引列表"
}

3.4 wxss

page {
  height: 100%;
  overflow: hidden;
}

.page {
  height: 100%;
  overflow: hidden;
}

.scrollList {
  flex: 1;
}

.search-bar {
  display: flex;
  align-items: center;
  position: relative;
  padding: 30rpx 30rpx 30rpx;
  background-color: #fff;
  /* box-shadow: 0 2px 2px #ccc;  */
}

.search-bar-form {
  flex: 1;
  position: relative;
  border-radius: 32rpx;
  background: #f2f5f7;
}

.search-bar-box {
  display: flex;
  align-items: center;
  position: relative;
  padding-left: 20rpx;
  padding-right: 20rpx;
  height: 64rpx;
  z-index: 1;
}

.search-bar-input {
  line-height: normal;
  width: 100%;
  padding-left: 20rpx;
  font-size: 30rpx;
  color: #333;
}

.phcolor {
  font-size: 30rpx;
}

.icon-clear {
  height: 38rpx;
}

.icon-search {
  position: relative;
  height: 26rpx;
  margin-right: 20rpx;
  font-size: inherit;
}

.cancel-btn {
  padding-left: 30rpx;
}

.btn-primary {
  height: 62rpx;
  width: 122rpx;
  font-size: 30rpx;
  line-height: 62rpx;
  margin-left: 30rpx;
}

.search-result::before {
  display: none;
}

.search-result::after {
  display: none;
}

.tui-list-cell {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.tui-list-cell-hover {
  background-color: #eee !important;
}

.tui-list-cell-navigate {
  width: 100%;
  position: relative;
  padding: 25rpx 0 25rpx 30rpx;
  font-size: 28rpx;
  color: #333;
  display: flex;
  align-items: center;
}

.tui-list-cell-navigate::after {
  content: '';
  position: absolute;
  border-bottom: 1rpx solid #eaeef1;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  bottom: 0;
  right: 0;
  left: 30rpx;
}

.img {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
}

.content {
  width: 80%;
  padding-left: 30rpx;
}

.title {
  width: 80%;
  font-size: 34rpx;
  padding-bottom: 10rpx;
  color: #333;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis
}

.sub-title {
  width: 80%;
  color: #7A7A7A;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 28rpx;
}

.tui-list {
  background-color: #fff;
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom);
}

.tui-list-cell-divider {
  height: 66rpx;
  padding-left: 30rpx;
  font-size: 26rpx;
  color: #999;
  background: #f2f5f7;
  padding: 0 30rpx;
  display: flex;
  align-items: center;
}

.tui-indexed-list-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  z-index: 9999;
  position: absolute;
  top: 132rpx;
  right: 0;
  padding-right: 10rpx;
  width: 44rpx;
}

.tui-indexed-list-text {
  font-size: 22rpx;
}

.tui-indexed-list-bar.active {
  background-color: rgb(200, 200, 200);
}

.tui-indexed-list-alert {
  position: absolute;
  z-index: 20;
  width: 120rpx;
  height: 120rpx;
  right: 90rpx;
  top: 50%;
  margin-top: -60rpx;
  border-radius: 16rpx;
  text-align: center;
  line-height: 120rpx;
  font-size: 50rpx;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.5);
}

微信小程序自定义组件-城市选择
RaoMeng1995的博客
07-16 4068
上篇文章有介绍一些小程序的自定义组件语法，这篇文章就不多做赘述，重点介绍组件的实现逻辑。 先把效果图贴出来，看看要实现的效果：   城市选择效果图.gif 首先还是设置布局，从实现效果看，组件可分成三个部分：展示城市数据的二级列表、侧边的滑动栏以及中间的提示框。也就是一个scroll-view，一个view布局以及一个text。最终确定的wxml布局文件如下： &lt;scroll...
微信小程序UI组件库合集
最新发布
轻风细雨_林木木
06-21 1706
今天无意间看到一个小程序UI总结地址，觉得挺好，有的时候要用总是找不到，今天收藏一下。https://developers.weixin.qq.com/community/develop/article/doc/000ecc775a86807f7ba9b7dc956c13https://developers.weixin.qq.com/miniprogram/dev/extended/weui/https://github.com/weilanwl/ColorUI https://youzan.github
微信小程序实现城市列表选择
12-10
本文实例为大家分享了小程序实现城市列表选择的具体代码，供大家参考，具体内容如下 实现效果预览   实现功能简介 城市的选择 按中文/拼音/首字母条件搜索 按首字字母快速定位到城市位置 目录结构 主要代码 app.js App({ globalData: { trainBeginCity: '杭州', trainEndCity: '北京' } }) app.json { "pages":[ "pages/index/index", "pages/citys/citys" ], "window":{ "backgroundTextStyle":"light",
ThorUI组件库,微信小程序项目代码分享,组件文档地址:https://www.thorui.cn/doc。最近更新时间:2021-01-19 - dingyong0214 / ThorUI
01-26
ThorUI ThorUI组件库小程序原生版本，该开源版源码为V1.4.2版本，后续更新版本付费会员才可使用（￥120/永久）【线上最新版为V1.6.1】。 微信小程序 H5二维码 QQ小程序 Android App ThorUI示例 网站介绍 ThorUI组件文档 交流群 QQ群1：745733024 QQ群2：881906325 QQ群3：605135318 QQ群4：928308676 会员群：加入会员可进 更新日志 V1.6.1 （2021-01-19） 【ThorUI组件库V1.6.1】更新： 1.商城模板更新： 1）商城模板拆分成单独模板项目。 2）个人中心，新增未登录状态。 3）个人信息页面操作优化。 4）编辑地址页面优化，新增省市区城市选择。 5）新增我的钱包页面。 6）新增充值确认页面。 7）新增我的银行卡页面。 8）新增交易记录页面。 9）商品详情页分享优化，新增生成分
微信小程序--根据首字母选择城市
weixin_34080571的博客
12-06 1175
前言 首先看一下项目截图 业务场景：项目中有时会遇到根据首字母选择城市，或者根据首字母选择通讯录姓名等等，那如果按照以前的思路需要用判断滚动条的位置，才能滑动到哪个地方。小程序官方有提供scroll-into-view属性，可以更快的解决这个场景。 小程序官方提供的属性描述。小程序文档 代码实现 wxml代码片段 <scroll-view scroll-y scroll-int...
ThorUI组件库，微信小程序项目代码分享，组件文档地址：.zip
02-28
在实际应用中，开发者需要了解微信小程序的基本框架和开发流程，熟悉WXML（微信小程序的标记语言）和WXSS（微信小程序的样式语言），以及JavaScript的API，才能有效地利用ThorUI组件库。此外，掌握组件的生命周期、...
微信小程序UI库大全：集成与预览
本资源是一份详尽的微信小程序UI组件库集合，包含了多个流行的和官方推荐的微信小程序设计框架与组件库。以下是对这些库的详细介绍： 1. **官方WeUI**: 微信官方提供的轻量级UI库，地址是 ，它提供了简洁易用的组件...
uniapp组件库-ThorUI-uni-vip.zip
09-01
它统一了各端的开发体验，通过一套代码可以发布到iOS、Android、Web（H5）、微信小程序、支付宝小程序、百度小程序、QQ小程序等多个平台。 2. **Vue.js**：Vue.js是一个用于构建用户界面的渐进式框架，它的核心库...
微信小程序 城市选择器 城市切换
01-14
微信小程序 城市选择器 城市切换
微信小程序开发之城市选择器 城市切换
12-23
微信小程序开发之城市选择器 城市切换
微信小程序实现根据字母选择城市功能
08-29
主要为大家详细介绍了微信小程序中根据字母选择城市的相关方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
小程序选择城市页面
09-14
小程序选择城市代码全 包括小程序选择城市的wxml、wxss、js、json文件，以及存放数据的city.js文件。
微信小程序仿美团城市选择
08-27
主要为大家详细介绍了微信小程序仿美团城市选择，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
微信小程序 城市选择组件 城市选择器
10-13
微信小程序里面，需要用到城市选择地地方，通过调用城市选择器的组件，供页面选择城市
小程序城市选择
weixin_44714325的博客
09-01 1771
最近遇到了一个新的需求，就是在项目中添加城市选择，小程序的城市选择也不是什么难点，网上也有很多的demo，主要是数据格式的不同，总结了一下，基本上属于两种结构。大部分demo都是引入所有的城市，大家在选择测试的时候可能觉得并不方便，所有我把数据抽取了部分出来，大家尝试后可以再对所有城市的数据进行封装，在网络上搜索的话基本上分为两种数据格式，多数如下第一种所示，第二种是根据接口需要更改的格式，同时前端也会使用两种不同的数据格式去渲染。 第一种 citys: [ { "A": [
小程序城市选择字母列表
weixin_38169886的博客
08-07 769
效果图： 代码： <view class="title"> <!-- <input class="title_list" value="{{cityName}}" placeholder="城市名称" /> <button>确认</button> --> <view style='col...
SelectCity 微信小程序选择城市组件
qq_33378937的博客
11-01 4428
SelectCity 微信小程序选择城市组件 项目介绍 在巨人的肩膀上继续制作的我的选择城市代码片段 github 地址 https://github.com/shichuyu/SelectCity 码云地址 https://gitee.com/cjty/SelectCity 安装教程 复制这段链接 wechatide://minicode/cBfbjtmq7q3i 打开微信小程序的导入代码片段...
微信小程序城市选择插件
dianwan5205的博客
03-16 1885
实现搜索城市功能和通过首字母选择城市 js文件 // pages/address/address.js var app = getApp() Page({ data: { searchLetter: [], showLetter: "", winHeight: 0, cityList: [], ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值