【微信小程序开发】自定义组件以及页面布局设计

news/2024/7/20 4:34:46 标签: 小程序, 微信小程序

🥳🥳Welcome Huihui's Code World ! !🥳🥳

接下来看看由辉辉所写的关于小程序的相关操作吧

目录

🥳🥳Welcome Huihui's Code World ! !🥳🥳

一.自定义组件的使用步骤（附实例）

1.创建自定义组件

2.在wxml中制定组件模板

3.wxss中给模板设计样式

4.js中定义组件的属性

5.定义组件的相关事件

6.在其他页面中使用组件

二.个人中心的布局实现

wxml

wxss

效果预览

三.投票的布局设计 

wxml

wxss

js

效果预览

一.自定义组件的使用步骤（附实例）

1.创建自定义组件

但我们如果使用的是最新版的微信开发工具，那么在我们新建了自定义组件之后，会出现一个错误

这个是因为它在过滤检查文件，如何可能会出现错误，为了不干扰我们的开发，我们需要在project.config.json中写两行代码

"ignoreDevUnusedFiles": false,
"ignoreUploadUnusedFiles": false,

2.在wxml中制定组件模板

<!--components/tabs/tabs.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>

3.wxss中给模板设计样式

/* components/tabs/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;
}

4.js中定义组件的属性

5.定义组件的相关事件

// components/tabs/tabs.js
Component({

  /**
   * 组件的属性列表
   */
  properties: {
    tabList:Object
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {
    handleItemTap(e){
      // 获取索引
      const {index} = e.currentTarget.dataset;
      // 触发 父组件的事件
      this.triggerEvent("tabsItemChange",{index})
      this.setData({
          tabIndex:index
      })
  }
}
})

6.在其他页面中使用组件

①在对应使用的界面的json中引用自定义组件

{
  "usingComponents": { "tabs":"/components/tabs/tabs"},
  "navigationBarTitleText": "会议"
}

②在使用组件的wxml页面中使用组件

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

③定义属性值

Page({

  /**
   * 页面的初始数据
   */
  data: {
    tabs:['会议中','已完成','已取消','全部会议'],
    lists: [
      {
        'id': '1',
        'image': '/static/persons/1.jpg',
        'title': '对话产品总监 | 深圳·北京PM大会 【深度对话小米/京东/等产品总监】',
        'num':'304',
        'state':'进行中',
        'time': '10月09日 17:59',
        'address': '深圳市·南山区'
      },
      {
        'id': '1',
        'image': '/static/persons/2.jpg',
        'title': 'AI WORLD 2016世界人工智能大会',
        'num':'380',
        'state':'已结束',
        'time': '10月09日 17:39',
        'address': '北京市·朝阳区'
      },
      {
        'id': '1',
        'image': '/static/persons/3.jpg',
        'title': 'H100太空商业大会',
        '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': '北京市·朝阳区'
      },
      {
        'id': '1',
        'image': '/static/persons/5.jpg',
        'title': '新质生活 · 品质时代 2016消费升级创新大会',
        'num':'217',
        'state':'进行中',
        'time': '10月09日 16:59',
        'address': '北京市·朝阳区'
      }
    ],
    lists1: [
      {
        'id': '1',
        'image': '/static/persons/1.jpg',
        'title': '对话产品总监 | 深圳·北京PM大会 【深度对话小米/京东/等产品总监】',
        'num':'304',
        'state':'进行中',
        'time': '10月09日 17:59',
        'address': '深圳市·南山区'
      },
      {
        'id': '1',
        'image': '/static/persons/2.jpg',
        'title': 'AI WORLD 2016世界人工智能大会',
        'num':'380',
        'state':'已结束',
        'time': '10月09日 17:39',
        'address': '北京市·朝阳区'
      },
      {
        'id': '1',
        'image': '/static/persons/3.jpg',
        'title': 'H100太空商业大会',
        'num':'500',
        'state':'进行中',
        'time': '10月09日 17:31',
        'address': '大连市'
      }
    ],
    lists2: [
      {
        'id': '1',
        'image': '/static/persons/1.jpg',
        'title': '对话产品总监 | 深圳·北京PM大会 【深度对话小米/京东/等产品总监】',
        'num':'304',
        'state':'进行中',
        'time': '10月09日 17:59',
        'address': '深圳市·南山区'
      },
      {
        'id': '1',
        'image': '/static/persons/2.jpg',
        'title': 'AI WORLD 2016世界人工智能大会',
        'num':'380',
        'state':'已结束',
        'time': '10月09日 17:39',
        'address': '北京市·朝阳区'
      }
    ],
    lists3: [
      {
        'id': '1',
        'image': '/static/persons/1.jpg',
        'title': '对话产品总监 | 深圳·北京PM大会 【深度对话小米/京东/等产品总监】',
        'num':'304',
        'state':'进行中',
        'time': '10月09日 17:59',
        'address': '深圳市·南山区'
      },
      {
        'id': '1',
        'image': '/static/persons/2.jpg',
        'title': 'AI WORLD 2016世界人工智能大会',
        'num':'380',
        'state':'已结束',
        'time': '10月09日 17:39',
        'address': '北京市·朝阳区'
      },
      {
        'id': '1',
        'image': '/static/persons/3.jpg',
        'title': 'H100太空商业大会',
        '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': '北京市·朝阳区'
      },
      {
        'id': '1',
        'image': '/static/persons/5.jpg',
        'title': '新质生活 · 品质时代 2016消费升级创新大会',
        'num':'217',
        'state':'进行中',
        'time': '10月09日 16:59',
        'address': '北京市·朝阳区'
      }
    ]
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },


  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  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
      })
  }
})

效果预览

二.个人中心的布局实现

wxml

<!--pages/ucenter/index/index.wxml-->
<!--pages/ucenter/index/index.wxml-->
<!-- <text>pages/ucenter/index/index.wxml</text> -->
<view class="userInfo">
    <image class="user-profile" src="/static/persons/1.jpg"></image>
    <text class="user-name">用户登录</text>
    <text class="user-click">修改</text>
</view>
<view class="item1">
    <view class="box1">
        <image src="/static/tabBar/sdk.png" class="box-icon"></image>
        <text class="box-title">我主持的会议</text>
        <text class="box-num">1</text>
        <text class="box-click">＞</text>
    </view>
    <view class="box2">
        <image src="/static/tabBar/sdk.png" class="box-icon"></image>
        <text class="box-title">我参与的会议</text>
        <text class="box-num">1000</text>
        <text class="box-click">＞</text>
    </view>
</view>

<view class="item2">
    <view class="box1">
        <image src="/static/tabBar/sdk.png" class="box-icon"></image>
        <text class="box-title">我发布的投票</text>
        <text class="box-num">12</text>
        <text class="box-click">＞</text>
    </view>
    <view class="box2">
        <image src="/static/tabBar/sdk.png" class="box-icon"></image>
        <text class="box-title">我参与的投票</text>
        <text class="box-num">100</text>
        <text class="box-click">＞</text>
    </view>
</view>


 <view class="item3">
    <view class="box1">
        <image src="/static/tabBar/sdk.png" class="box-icon"></image>
        <text class="box-title">消息</text>
        <text class="boxs-click">＞</text>
    </view>
    <view class="box2">
        <image src="/static/tabBar/sdk.png" class="box-icon"></image>
        <text class="box-title">设置</text>
        <text class="boxs-click">＞</text>
    </view>
</view>

wxss

/* pages/ucenter/index/index.wxss */
.userInfo{
  height:100px;
  display: flex;
  border-bottom: rgb(235, 234, 234) solid 6px;
}
.user-profile{
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
}
.user-name{
  font-weight: bolder;
  display: flex;
  align-items: center;
 margin-left: 20px;
 width: 450rpx;
}
.user-click{
  display: flex;
  align-items: center;
  color: lightgray;
}
.item1{
  /* /* display: flex; */
  border-bottom: rgb(235, 234, 234) solid 6px; 
}
.box1{
  height: 50px;
  display: flex;
  align-items: center;
  border-bottom: rgb(235, 234, 234) solid 1px; 
}
.box2{
  height: 50px;
  display: flex;
  align-items: center;
}
.box-icon{
  width: 50rpx;
  height: 50rpx;
  margin-right: 10px;
}
.box-title{

}
.box-num{
  width: 20px;
  margin-left: 180px;
}
.box-click{
  margin-left: 20px;
  color: lightgray;
}


.item2{
  /* /* display: flex; */
  border-bottom: rgb(235, 234, 234) solid 6px; 
}


.boxs-click{
  margin-left: 282px;
  color: lightgray;
}

效果预览

三.投票的布局设计 

wxml

<!--pages/vote/list/list.wxml-->
<!-- <view class="food-button" bindtap="jumpToFoodPage">
  <image class="food-icon" src="../../../static/vote/totaldata-active.png"></image>
  <text class="food-label">投票统计</text>
</view> -->

<view class="info-title">
  <image class="img-title"  src="../../../static/vote/sousuo.png"></image>
  <input  type="text" placeholder="选择所属会议" />
</view>

<view class="vote-button" bindtap="jumpToFoodPage">
  <block wx:for="{{myvotelist}}" wx:key="index">
    <view class="myvotes">
      <view class="myimg">
        <image class="vote-icon" src="{{item.img}}"></image>
      </view>
      <view class="myview">
        <text class="vote-label">{{item.name}}</text>
      </view>
    </view>
  </block>
  <image class="vote-add" src="../../../static/vote/addvote.png"></image>
</view>

wxss

// pages/vote/list/list.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    myvotelist:[
     {index:1, name:'投票统计',img:'../../../static/vote/totaldata-active.png'},
     {index:3, name:'历史投票',img:'../../../static/vote/voterecords-active.png'},
     {index:2, name:'赞成人数',img:'../../../static/vote/yes-active.png'},
     {index:3, name:'反对人数',img:'../../../static/vote/no-active.png'},
   
    ]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

js

// pages/vote/list/list.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    myvotelist:[
     {index:1, name:'投票统计',img:'../../../static/vote/totaldata-active.png'},
     {index:3, name:'投票记录',img:'../../../static/vote/voterecords-active.png'},
     {index:2, name:'赞成人数',img:'../../../static/vote/yes-active.png'},
     {index:3, name:'反对人数',img:'../../../static/vote/no-active.png'},
   
    ]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

效果预览

好啦，今天的分享就到这了，希望能够帮到你呢！😊😊  


http://www.niftyadmin.cn/n/5108108.html

相关文章

这个建筑工地神器，工作效率杠杠的！

这个建筑工地神器，工作效率杠杠的！

智慧工地是一种基于现代技术的建筑施工管理方法&#xff0c;它借助物联网、大数据分析和人工智能等技术&#xff0c;提高了工地的安全性、效率和可持续性。通过实时数据监测和智能决策支持&#xff0c;智慧工地正在为建筑行业带来革命性的变革。 ​客户案例 建筑公司 浙江某建设…
阅读更多...
面试八股文：C++ 多态 继承 重载 虚函数

面试八股文：C++ 多态 继承 重载 虚函数

C 支持多态、继承和函数重载&#xff0c;这些是面向对象编程&#xff08;OOP&#xff09;的基本概念。以下是这些概念的简要介绍&#xff1a; 多态&#xff08;Polymorphism&#xff09;&#xff1a; 多态是面向对象编程的核心概念之一&#xff0c;它允许不同的子类对象对相同的…
阅读更多...
NewStarCTF 2023 公开赛道 WEEK2|MISC1-序章

NewStarCTF 2023 公开赛道 WEEK2|MISC1-序章

题目 172.17.0.1 - - [20/Aug/2023:00:08:21 0800] "GET /app/action/edit_sell.php?pid%5B0%5D-1%20or%20if(ascii(substr((select%20group_concat(username,password)%20from%20user),1,1))40,sleep(1),1)--&totalPrice0 HTTP/1.1" 500 353 "-" &q…
阅读更多...
网上可以赚钱的软件，闲暇时间可用来薅羊毛做副业

网上可以赚钱的软件，闲暇时间可用来薅羊毛做副业

正因为有了互联网&#xff0c;我们的生活变得越来越便利。我们可以在网上购物、休闲娱乐、与朋友交流&#xff0c;甚至可以通过网上做副业来赚取额外收入。生活中总会有一些业余时间&#xff0c;而很多人也不想浪费它&#xff0c;总想着做一点事情来弥补经济上的不足。因此&…
阅读更多...
Allegro如何快速修线

Allegro如何快速修线

在Allegro PCB设计中，通常修改比较乱的走线，都是用Slide修线功能，但Allegro的自动平滑走线功能，比手动修线更方面，更好用。用好了，可以提高PCB设计的效率。 杂乱的走线如下图 选择菜单Route 选择Custom Smooth（自定义平滑），或者点击自己设置的快捷键。
阅读更多...
window10/11 光学系统建模之Light Tools8.6 软件安装教程（亲测可用+附带免费资源可直接下载）

window10/11 光学系统建模之Light Tools8.6 软件安装教程（亲测可用+附带免费资源可直接下载）

1.下载链接 &#xff08;免费分享&#xff09; 链接&#xff1a;https://pan.baidu.com/s/1qVubyRSC93xT-GKeK-k3ow 提取码&#xff1a;vkho 2.安装顺序 即按照图里的1234的顺序先安装完注册表&#xff0c;驱动&#xff0c;和lighttools的程序 我个人在win10系统安装这些程…
阅读更多...
MD-MTSP：粒子群优化算法PSO求解多仓库多旅行商问题MATLAB（可更改数据集，旅行商的数量和起点）

MD-MTSP：粒子群优化算法PSO求解多仓库多旅行商问题MATLAB（可更改数据集，旅行商的数量和起点）

一、多仓库多旅行商问题MD-MTSP 多旅行商问题&#xff08;Multiple Traveling Salesman Problem, MTSP&#xff09;是著名的旅行商问题&#xff08;Traveling Salesman Problem, TSP&#xff09;的延伸&#xff0c;多旅行商问题定义为&#xff1a;给定一个&#x1d45b;座城市…
阅读更多...
laravel6 邮件发送注意事项

laravel6 邮件发送注意事项

.env邮件部分的配置&#xff1a; MAIL_DRIVERsendmail MAIL_HOSTxx.xx.xx MAIL_PORT465 MAIL_USERNAMExxxx.xx MAIL_PASSWORDxxxx MAIL_ENCRYPTIONssl MAIL_FROM_ADDRESSxxxx.xx MAIL_FROM_NAMExxx 发送邮件的部分代码&#xff1a; $to_email $data[email]; $filepath $da…
阅读更多...
最新文章

Copyright @ 2022~2023