微信小程序组件的应用

最新推荐文章于 2024-05-16 17:41:03 发布

原创

最新推荐文章于 2024-05-16 17:41:03 发布 · 484 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#城市组件 #组件应用

首先我们在跟pages平级创建components目录用于存放自定义组件。如图所示，以我创建的adress组件为例，自定义组件的格式与页面一样，分为5个文件。
在这里插入图片描述图1
图2

如上图所示如果页面需要选择一个城市，并且在页面显示出这个城市的名称。
一.首先展示下组件页面以及组件页面的样式，js，json文件
adress.wxml

<!--pages/components/adress/adress.wxml-->
<wxs src="config.wxs" module="config" />

<view class='list-warpper'>
  <view wx:if="{
  
  {config.search}}" class='list-search'>
    <view class='list-search-box'>
      <icon type="search" size="15" color="#fad8c9" />
      
      <input placeholder-style="color:white;font-size:30rpx;" placeholder="输入您要搜索的城市" bindinput='input' value="{
  
  {inputValue}}"/>
      <icon bindtap="clear" type="clear" size="15" color="#fad8c9" />
    </view>
    <button wx:if="{
  
  {config.searchBtn}}" class='search-button' catchtap='searchMt'>搜索</button>
  </view>
  
  <block wx:if="{
  
  {list.length != 0 }}">
    <scroll-view style="height: {
  
  {screenHeight*0.95}}px;" class="list-scroll {
  
  {config.search?'top':''}}" scroll-y="true" scroll-into-view="{
  
  {jumpNum}}" scroll-with-animation="{
  
  {config.animation}}">
      <view class="line-h30" style=""></view>
      <!-- 我的位置  -->
      <view wx:if="{
  
  {myCity}}">
        <view class='list-horizontal myaddress'>
          <view class="wh40" style="">
            <!--<image class="wh100" mode="aspectFit" src="/image/address.png"></image> -->
          </view>
          <view class='myaddressText' data-detail="{
  
  {myCity}}" data-mycity='1' catchtap='detailMt'>
            {
  
  {myCity}}
          </view>
          <view class="mt14">GPS定位</view>
        </view>
      </view>

      <!-- 历史访问城市 -->
      <view wx:if="{
  
  {historyAddress&&config.history}}">
        <view class='list-title'>历史访问城市</view>
        <view class='list-horizontal'>
          <view class='list-name border' wx:for="{
  
  {historyAddress}}" wx:for-item="history" wx:for-index="idx" wx:key="history" data-detail="{
  
  {history}}" catchtap='detailMt'>
            {
  
  {history.name}}
          </view>
        </view>
      </view>

      <!-- 热门搜索&所有城市 -->
      <view id="{
  
  {'index'+index}}" wx:for="{
  
  {list}}" wx:key="key">
        <view class='list-title'>{
  
  {item.title}}</view>
        <view class='{
  
  {index===0&&config.horizontal&&item.type==="hot"?"list-horizontal":""}}'>
          <view class='list-name {
  
  {idx === 0 ?"":"border"}}' wx:for="{
  
  {item.item}}" wx:for-item="city" wx:for-index="idx" wx:key="city" data-detail="{
  
  {city}}" catchtap='detailMt'>
            {
  
  {city.