国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

  1. Toy模板網(wǎng)首頁
  2. >Toy博客

小程序中如何使用自定義組件應用及搭建個人中心布局

2年前作者：Love-Java.分類：Toy博客閱讀(21)違法舉報

這篇具有很好參考價值的文章主要介紹了小程序中如何使用自定義組件應用及搭建個人中心布局。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點擊"舉報違法"按鈕提交疑問。

一，自定義組件

從小程序基礎庫版本?1.6.3?開始，小程序支持簡潔的組件化編程。所有自定義組件相關特性都需要基礎庫版本?1.6.3?或更高。

開發(fā)者可以將頁面內的功能模塊抽象成自定義組件，以便在不同的頁面中重復使用；也可以將復雜的頁面拆分成多個低耦合的模塊，有助于代碼維護。自定義組件在使用時與基礎組件非常相似

創(chuàng)建自定義組件

1.1 建立文件

小程序中如何使用自定義組件應用及搭建個人中心布局,小程序

1.2 修改文件及添加文件

類似于頁面，一個自定義組件由?json?wxml?wxss?js?4個文件組成。要編寫一個自定義組件，首先需要在?json?文件中進行自定義組件聲明（將?component?字段設為?true?可將這一組文件設為自定義組件）：

首先需要在 json 文件中進行自定義組件聲明（將 component 字段設為 true 可將這一組文件設為自定義組件）

tabs.json:

小程序中如何使用自定義組件應用及搭建個人中心布局,小程序

在project.config.json添加行代碼 :

小程序中如何使用自定義組件應用及搭建個人中心布局,小程序

二，個人中心布局

2.1 創(chuàng)建自定義組件

tabs.wxml：

<!--components/tabs/tabs.wxml-->
<!-- <text>components/tabs/tabs.wxml</text> -->
<!-- 這是自定義組件的內部WXML結構 -->
<view class="tabs">
    <view class="tabs_title">
        <view wx:for="{{tabList}}" wx:key="id" class="title_item  {{index==tabIndex?'item_active':''}}" bindtap="handleItemTap" data-index="{{index}}">
            <view style="margin-bottom:5rpx">{{item}}</view>
            <view style="width:30px" class="{{index==tabIndex?'item_active1':''}}"></view>
        </view>
    </view>
    <view class="tabs_content">
        <slot></slot>
    </view>
</view>

tabs.wxss:

.tabs {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #fff;
    z-index: 99;
    border-bottom: 1px solid #efefef;
    padding-bottom: 20rpx;
}
 
.tabs_title {
    /* width: 400rpx; */
    width: 90%;
    display: flex;
    font-size: 9pt;
    padding: 0 20rpx;
}
 
.title_item {
    color: #999;
    padding: 15rpx 0;
    display: flex;
    flex: 1;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
}
 
.item_active {
    /* color:#ED8137; */
    color: #000000;
    font-size: 11pt;
    font-weight: 800;
}
 
.item_active1 {
    /* color:#ED8137; */
    color: #000000;
    font-size: 11pt;
    font-weight: 800;
    border-bottom: 6rpx solid #333;
    border-radius: 2px;
}

?tabs.js:

var App = getApp();
Component({
  /**
   * 組件的屬性列表
   */
  properties: {
    tabList:Object
  },
 
  /**
   * 組件的初始數(shù)據(jù)
   */
  data: {
    tabIndex:0
  },
 
  /**
   * 組件的方法列表
   */
  methods: {
    handleItemTap(e){
      // 獲取索引
      const {index} = e.currentTarget.dataset;
      // 觸發(fā) 父組件的事件
      this.triggerEvent("tabsItemChange",{index})
      this.setData({
          tabIndex:index
      })
    }
  }
})

?2.2 使用自定義組件

需要在哪個頁面中進行使用，就需要在哪個頁面中進行引用配置.

比如說 : 需要在會議頁面中進行使用，就要在會議頁面.json (meeting/list/list.json）下配置即可。

本案例是配置在會議模塊中，那就是在.json (meeting/list/list.json）中配置。

meeting目錄下的list.json:

{
  "usingComponents": {
    "tabs": "/components/tabs/tabs"
  }
}

meeting目錄下的list.js的data中定義屬性:

 tabs:['會議中','已完成','已取消','全部會議']

meeting目錄下的list.wxml:

<tabs tabList="{{tabs}}"  bindtabsItemChange="tabsItemChange">
</tabs>

效果：

小程序中如何使用自定義組件應用及搭建個人中心布局,小程序

2.3 會議模塊布局

? ? 點擊相應的內容顯示相應的數(shù)據(jù)，我們只需將所點擊內容的index值傳遞，根據(jù)index值的不同進行不同數(shù)據(jù)的遍歷即可

2.3.1 數(shù)據(jù)

在list.js定義：

// pages/meeting/list/list.js
Page({
 
  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
    tabs:['會議中','已完成','已取消','全部會議'],
    lists: [
      {
        'id': '1',
        'image': '/static/persons/1.jpg',
        'title': '對話產(chǎn)品總監(jiān) | 深圳·北京PM大會 【深度對話小米/京東/等產(chǎn)品總監(jiān)】',
        'num':'304',
        'state':'進行中',
        'time': '10月09日 17:59',
        'address': '深圳市·南山區(qū)'
      },
      {
        'id': '2',
        'image': '/static/persons/2.jpg',
        'title': 'AI WORLD 2016世界人工智能大會',
        'num':'380',
        'state':'進行中',
        'time': '10月09日 17:39',
        'address': '北京市·朝陽區(qū)'
      },
      {
        'id': '3',
        'image': '/static/persons/3.jpg',
        'title': 'H100太空商業(yè)大會',
        'num':'500',
        'state':'進行中',
        'time': '10月09日 17:31',
        'address': '大連市'
      },
      {
        'id': '1',
        'image': '/static/persons/4.jpg',
        'title': '報名年度盛事，大咖云集！2016鳳凰國際論壇邀您“與世界對話”',
        'num':'150',
        'state':'進行中',
        'time': '10月09日 17:21',
        'address': '北京市·朝陽區(qū)'
      },
      {
        'id': '1',
        'image': '/static/persons/5.jpg',
        'title': '新質生活 · 品質時代 2016消費升級創(chuàng)新大會',
        'num':'217',
        'state':'進行中',
        'time': '10月09日 16:59',
        'address': '北京市·朝陽區(qū)'
      }
    ],
    lists1: [
      {
        'id': '1',
        'image': '/static/persons/7.jpg',
        'title': '對話產(chǎn)品總監(jiān) | 深圳·北京PM大會 【深度對話小米/京東/等產(chǎn)品總監(jiān)】',
        'num':'304',
        'state':'已結束',
        'time': '10月09日 17:59',
        'address': '深圳市·南山區(qū)'
      },
      {
        'id': '1',
        'image': '/static/persons/6.jpg',
        'title': 'AI WORLD 2016世界人工智能大會',
        'num':'380',
        'state':'已結束',
        'time': '10月09日 17:39',
        'address': '北京市·朝陽區(qū)'
      },
      {
        'id': '1',
        'image': '/static/persons/1.jpg',
        'title': 'H100太空商業(yè)大會',
        'num':'500',
        'state':'已結束',
        'time': '10月09日 17:31',
        'address': '大連市'
      }
    ],
    lists2: [
      {
        'id': '1',
        'image': '/static/persons/4.jpg',
        'title': '對話產(chǎn)品總監(jiān) | 深圳·北京PM大會 【深度對話小米/京東/等產(chǎn)品總監(jiān)】',
        'num':'304',
        'state':'進行中',
        'time': '10月09日 17:59',
        'address': '深圳市·南山區(qū)'
      },
      {
        'id': '1',
        'image': '/static/persons/3.jpg',
        'title': 'AI WORLD 2016世界人工智能大會',
        'num':'380',
        'state':'已結束',
        'time': '10月09日 17:39',
        'address': '北京市·朝陽區(qū)'
      }
    ],
    lists3: [
      {
        'id': '1',
        'image': '/static/persons/7.jpg',
        'title': '對話產(chǎn)品總監(jiān) | 深圳·北京PM大會 【深度對話小米/京東/等產(chǎn)品總監(jiān)】',
        'num':'304',
        'state':'進行中',
        'time': '10月09日 17:59',
        'address': '深圳市·南山區(qū)'
      },
      {
        'id': '1',
        'image': '/static/persons/2.jpg',
        'title': 'AI WORLD 2016世界人工智能大會',
        'num':'380',
        'state':'已結束',
        'time': '10月09日 17:39',
        'address': '北京市·朝陽區(qū)'
      },
      {
        'id': '1',
        'image': '/static/persons/4.jpg',
        'title': 'H100太空商業(yè)大會',
        'num':'500',
        'state':'進行中',
        'time': '10月09日 17:31',
        'address': '大連市'
      },
      {
        'id': '1',
        'image': '/static/persons/5.jpg',
        'title': '報名年度盛事，大咖云集！2016鳳凰國際論壇邀您“與世界對話”',
        'num':'150',
        'state':'已結束',
        'time': '10月09日 17:21',
        'address': '北京市·朝陽區(qū)'
      },
      {
        'id': '1',
        'image': '/static/persons/1.jpg',
        'title': '新質生活 · 品質時代 2016消費升級創(chuàng)新大會',
        'num':'217',
        'state':'進行中',
        'time': '10月09日 16:59',
        'address': '北京市·朝陽區(qū)'
      }
    ]
  },
  tabsItemChange(e){
    let tolists;
    if(e.detail.index==1){
        tolists = this.data.lists1;
    }else if(e.detail.index==2){
        tolists = this.data.lists2;
    }else{
        tolists = this.data.lists3;
    }
    this.setData({
        lists: tolists
    })
},
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  onLoad(options) {
 
  },
 
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
   */
  onReady() {
 
  },
 
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面顯示
   */
  onShow() {
 
  },
 
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面隱藏
   */
  onHide() {
 
  },
 
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面卸載
   */
  onUnload() {
 
  },
 
  /**
   * 頁面相關事件處理函數(shù)--監(jiān)聽用戶下拉動作
   */
  onPullDownRefresh() {
 
  },
 
  /**
   * 頁面上拉觸底事件的處理函數(shù)
   */
  onReachBottom() {
 
  },
 
  /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage() {
 
  }
})
2.1.2?顯示

在list.wxml定義：

<!--pages/meeting/list/list.wxml-->
<tabs tabList="{{tabs}}"  bindtabsItemChange="tabsItemChange">
</tabs>
<view style="height: 100rpx;"></view>
<block wx:for-items="{{lists}}" wx:for-item="item" wx:key="item.id">
    <view class="list" data-id="{{item.id}}">
        <view class="list-img al-center">
            <image class="video-img" mode="scaleToFill" src="{{item.image}}"></image>
        </view>
        <view class="list-detail">
            <view class="list-title"><text>{{item.title}}</text></view>
            <view class="list-tag">
                <view class="state al-center">{{item.state}}</view>
                <view class="join al-center"><text class="list-num">{{item.num}}</text>人報名</view>
            </view>
            <view class="list-info"><text>{{item.address}}</text>|<text>{{item.time}}</text></view>
        </view>
    </view>
</block> 
<view class="section bottom-line">
		<text>到底啦</text>
</view>
2.1.3?樣式

在list.wxss定義：

/* pages/meeting/list/list.wxss */
.list {
  display: flex;
  flex-direction: row;
  width: 100%;
  padding: 0 20rpx 0 0;
  border-top: 1px solid #eeeeee;
  background-color: #fff;
  margin-bottom: 5rpx;
  /* border-radius: 20rpx;
  box-shadow: 0px 0px 10px 6px rgba(0,0,0,0.1); */
}
 
.list-img {
  display: flex;
  margin: 10rpx 10rpx;
  width: 150rpx;
  height: 220rpx;
  justify-content: center;
  align-items: center;
}
 
.list-img .video-img {
  width: 120rpx;
  height: 120rpx;
  
}
 
.list-detail {
  margin: 10rpx 10rpx;
  display: flex;
  flex-direction: column;
  width: 600rpx;
  height: 220rpx;
}
 
.list-title text {
  font-size: 11pt;
  color: #333;
  font-weight: bold;
}
 
.list-detail .list-tag {
  display: flex;
  height: 70rpx;
}
 
.list-tag .state {
  font-size: 9pt;
  color: #81aaf7;
  width: 120rpx;
  border: 1px solid #93b9ff;
  border-radius: 2px;
  margin: 10rpx 0rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
 
.list-tag .join {
  font-size: 11pt;
  color: #bbb;
  margin-left: 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
 
.list-tag .list-num {
  font-size: 11pt;
  color: #ff6666;
}
 
.list-info {
  font-size: 9pt;
  color: #bbb;
  margin-top: 20rpx;
}
.bottom-line{
  display: flex;
  height: 60rpx;
  justify-content: center;
  align-items: center;
  background-color: #f3f3f3;
}
.bottom-line text{
  font-size: 9pt;
  color: #666;
}

效果：

小程序中如何使用自定義組件應用及搭建個人中心布局,小程序

三、個人中心布局

3.1 布局

在個人中心頁面中編寫 .wxml 文件如 : ucenter/index/index.wxml)進行頁面顯示

布局

index.wxml:

<!--pages/ucenter/index/index.wxml-->
<!-- <text>pages/ucenter/index/index.wxml</text> -->
<view class="user">
    <image class="user-img"  src="/static/persons/8.jpg"></image>
    <view class="user-name">Bing</view>
    <text class="user-up">修改</text>
</view>
<view class="cells">
    <view class="cell-items">
        <image src="/static/tabBar/coding-active.png" class="cell-items-icon"></image>
        <text class="cell-items-title">我主持的會議</text>
        <text class="cell-items-num">5</text>
        <text class="cell-items-detail">??</text>
    </view>
    <view style="height: 5rpx;background-color: rgba(135, 206, 250, 0.075);"></view>
    <view class="cell-items">
        <image src="/static/tabBar/sdk.png" class="cell-items-icon"></image>
        <text class="cell-items-title">我參與的會議</text>
        <text class="cell-items-num">3</text>
        <text class="cell-items-detail">??</text>
    </view>
</view>
<view style="height: 27rpx;background-color: rgba(135, 206, 250, 0.075);"></view>
<view class="cells">
    <view class="cell-items">
        <image src="/static/tabBar/sdk.png" class="cell-items-icon"></image>
        <text class="cell-items-title">我發(fā)布的投票</text>
        <text class="cell-items-num">6</text>
        <text class="cell-items-detail">??</text>
    </view>
    <view style="height: 5rpx;background-color: rgba(135, 206, 250, 0.075);"></view>
    <view class="cell-items">
        <image src="/static/tabBar/coding-active.png" class="cell-items-icon"></image>
        <text class="cell-items-title">我參與的投票</text>
        <text class="cell-items-num">8</text>
        <text class="cell-items-detail">??</text>
    </view>
</view>
<view style="height: 27rpx;background-color: rgba(135, 206, 250, 0.075);"></view>
<view class="cells">
    <view class="cell-items">
        <image src="/static/tabBar/template.png" class="cell-items-icon"></image>
        <text class="cell-items-title">信息</text>
        <text class="cell-items-ion">??</text>
    </view>
    <view style="height: 5rpx;background-color: rgba(135, 206, 250, 0.075);"></view>
    <view class="cell-items">
        <image src="/static/tabBar/component.png" class="cell-items-icon"></image>
        <text class="cell-items-title">設置</text>
        <text class="cell-items-ion">??</text>
    </view>
</view>

3.2 樣式

在ucenter/index/index.wxss下編寫即可

index.wxss:

/* pages/ucenter/index/index.wxss */
Page{
  background-color: rgba(135, 206, 250, 0.075);
}
.user{
  display: flex;
  width: 100%;
  align-items:center;
  background-color: white;
  margin-bottom: 28rpx;
}
.user-img{
height: 170rpx;
width: 170rpx;
margin: 30rpx;
border: 1px solid #cdd7ee;
border-radius: 6px;
}
.user-name{
width: 380rpx;
margin-left: 20rpx;
font-weight: 550;
}
.user-up{
color: rgb(136, 133, 133);
}
.cells{
  background-color: white;
}
.cell-items{
  display: flex;
  align-items:center; 
  height: 110rpx;
}
.cell-items-title{
  width: 290rpx;
}
.cell-items-icon{
  width: 50rpx;
  height: 50rpx;
  margin: 20rpx;
}
.cell-items-num{
  padding-left: 30rpx;
  margin-left: 200rpx;
  width: 70rpx;
}
.cell-items-ion{
  margin-left: 295rpx;
}

效果：

小程序中如何使用自定義組件應用及搭建個人中心布局,小程序文章來源地址http://www.zghlxwxcb.cn/news/detail-714563.html

到了這里，關于小程序中如何使用自定義組件應用及搭建個人中心布局的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來自互聯(lián)網(wǎng)用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。如若轉載，請注明出處： 如若內容造成侵權/違法違規(guī)/事實不符，請點擊違法舉報進行投訴反饋，一經(jīng)查實，立即刪除！

領支付寶紅包贊助服務器費用

相關文章

  • 如何簡單的上手JavaFX17+？解決“缺少 JavaFX 運行時組件, 需要使用該組件來運行此應用程序”等問題

    如何簡單的上手JavaFX17+？解決“缺少 JavaFX 運行時組件, 需要使用該組件來運行此應用程序”等問題

    JavaFX是一個Java的一個ui庫，但是自從java8以后，它很悲慘的被從OpenJdk中移除了，因此我們使用它來進行開發(fā)時，如果我們使用的是8以后的版本，經(jīng)常會遇到一些問題。這里針對新手做一個簡單的引導（悲，也許根本沒新手來學吧） Fx的入門并不復雜，如果你學過其他的Ui庫或

    2024年02月02日
    瀏覽(21)
  • 搭建完全去中心化的個人站

    搭建完全去中心化的個人站

    為了寫篇《2019年區(qū)塊鏈熱潮退去后的冷思考》，我在新加坡圖書館里面蹲了2個晚上，結果平臺死活不讓我發(fā)出來。 原因： 我是博客愛好者，6-7年下來已經(jīng)寫了100多篇并發(fā)表，但是最近感覺審核的力度在加強，正如這個世界正處在非黑即白的境況，一些敏感的課題整個品類都

    2023年04月09日
    瀏覽(22)
  • 如何使用Github搭建個人博客

    如何使用Github搭建個人博客

    在本文中，我將介紹如何使用GitHub搭建個人博客（ 免費 ）。GitHub是一個功能強大的版本控制和協(xié)作平臺，它也可以用來托管和發(fā)布靜態(tài)網(wǎng)頁。通過將你的個人博客托管在GitHub上，你可以享受到版本控制的好處，并且能夠與其他開發(fā)者進行協(xié)作。 在GitHub官網(wǎng)上創(chuàng)建一個賬號，

    2024年02月15日
    瀏覽(23)
  • （小程序）后臺交互--個人中心

    （小程序）后臺交互--個人中心

    目錄 一、微信登錄流程簡介 二、微信用戶獲取用戶昵稱頭像和昵稱 ① wx.getUserProfile —— 獲取頭像 ?三、微信登錄流程代碼詳解 1.bindgetuserinfo——把小程序端搭建起來 ① oa-mini? 2.登錄-小程序 ① wx.checkSession? ② wx.login ③ wx.request 3.后臺 ① 準備數(shù)據(jù)表 ② 反向生成工具生成

    2024年02月09日
    瀏覽(18)
  • 微信小程序個人中心頁面 案例

    微信小程序個人中心頁面 案例

    微信小程序 開發(fā)，經(jīng)常會遇到個人中心頁面 的需求，為了方便大家使用，決定將個人總想頁面進行開源，以供大家參考交流。 一、效果預覽 ? ? ? ?二、源代碼 abouthe.json文件 abouthe.wxml文件 abouthe.wxss文件 abouthe.ts文件

    2024年02月11日
    瀏覽(23)
  • 微信小程序 - 商城項目 - 個人中心

    微信小程序 - 商城項目 - 個人中心

    ?

    2024年02月11日
    瀏覽(22)
  • 使用 NutUI 搭建「自定義業(yè)務風格」的組件庫 | 京東云技術團隊

    使用 NutUI 搭建「自定義業(yè)務風格」的組件庫 | 京東云技術團隊

    作者：京東零售 佟恩 本文介紹，如何使用 NutUI 組件庫，搭建一套為專屬業(yè)務風格的業(yè)務組件庫。 NutUI 是一款京東風格的移動端組件庫。NutUI 目前支持 Vue 和 React技術棧，支持Taro多端適配。 一般組件庫，都會給用戶提供修改主題的方式。比如在 NutUI 組件庫中，給用戶提供了

    2024年02月03日
    瀏覽(44)
  • 如何使用Jekyll在GitHub Pages上搭建網(wǎng)站（個人博客）

    如何使用Jekyll在GitHub Pages上搭建網(wǎng)站（個人博客）

    本文很長，建議使用側邊欄進行跳轉。 Jekyll 是一個基于 Ruby 語言的，用于搭建靜態(tài)網(wǎng)站的生成器，主要用于搭建博客網(wǎng)站（官方自己的介紹為：Jekyll is a blog-aware, static site generator in Ruby）。但是雖然是靜態(tài)網(wǎng)站，但是可以實現(xiàn)一些使用數(shù)據(jù)庫的動態(tài)網(wǎng)站的效果和功能，是很不

    2024年02月06日
    瀏覽(31)
  • 如何使用LightPicture+cpolar搭建個人云圖床隨時隨地公網(wǎng)訪問

    如何使用LightPicture+cpolar搭建個人云圖床隨時隨地公網(wǎng)訪問

    現(xiàn)在的手機越來越先進，功能也越來越多，而手機的攝像功能也愈發(fā)強大，所拍攝的照片越來越清晰，但也讓數(shù)碼照片的體積暴漲。對于像筆者這樣經(jīng)常拍照的人來說，手機容量經(jīng)常告警，因此筆者將家里的電腦改造成能隨時上傳下載和訪問的圖片服務器。今天，筆者就為大

    2024年01月18日
    瀏覽(31)
  • 如何使用Plex在Windows系統(tǒng)搭建個人媒體站點公網(wǎng)可訪問

    如何使用Plex在Windows系統(tǒng)搭建個人媒體站點公網(wǎng)可訪問

    用手機或者平板電腦看視頻，已經(jīng)算是生活中稀松平常的場景了，特別是各種碎片時間（追劇下飯、地鐵上刷劇等等），看個喜歡的視頻必不可少。但不知道為什么，各大影音平臺總能輪流占住熱播劇，還限定很多劇只能會員觀看，搞得我們總有交不完的會員費。此時，擁有

    2024年02月03日
    瀏覽(19)

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請作者喝杯咖啡吧~博客贊助

支付寶掃一掃領取紅包，優(yōu)惠每天領

二維碼1

領取紅包

二維碼2

領紅包