简单入门小程序02

最新推荐文章于 2024-04-23 20:25:11 发布
最新推荐文章于 2024-04-23 20:25:11 发布
阅读量411 收藏
点赞数
分类专栏： 小程序 文章标签： 小程序 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38788347/article/details/78138238
版权

上一节我们讲到《智慧插座》index 页面的制作，本文接下来讲 me 个人页面的制作。
本文的知识点有：
* 利用 wx:if 实现页面内部 tab 切换
* wx:for 的列表遍历

先上 me.wxss 代码

/* pages/me/me.wxss */

.user {
  width: 100%;
  padding: 20rpx 0;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.25);
  display: flex;
  justify-content: center;
}

.userimg {
  width: 150rpx;
  height: 150rpx;
  border-radius: 50%;
  border: 1px solid #eee;
}

.userDetail {
  font-size: 30rpx;
  color: #666;
  line-height: 60rpx;
  margin-left: 40rpx;
}

.tab {
  display: flex;
  justify-content: center;
  font-size: 30rpx;
}

.tabBtn {
  margin-top: 20rpx;
  padding: 20rpx;
  background: #1296db;
  color: #fff;
  margin: 40rpx 10rpx 20rpx 10rpx;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.25);
}

.detail {
  width: 600rpx;
  padding: 20rpx;
  margin: 20rpx auto;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  background: #fff;
}

.img {
  width: 100rpx;
  height: 100rpx;
}

.desc {
  font-size: 30rpx;
  color: #666;
  line-height: 50rpx;
  margin: 0 20rpx;
}

.active {
  animation: mymove 3s linear infinite;
}

@keyframes mymove {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.tab-pannel {
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  background: #eee;
  padding: 20rpx;
  margin-top: -14rpx;
  width: 670rpx;
  margin-left: auto;
  margin-right: auto;
}

.icon {
  width: 0;
  height: 0;
  border-left: 50rpx solid transparent;
  border-right: 50rpx solid transparent;
  border-bottom: 50rpx solid #eee;
  position: relative;
  left: 40rpx;
  top: -8rpx;
}

me.json 代码

{
  "navigationBarTitleText": "个人中心"
}

me.wxml 代码

<!--pages/me/me.wxml-->
<view class='user'>
  <image src='http://socket.web.ecxpp.net/static/default/user.jpg' class='userimg'></image>
  <view class='userDetail'>
    <view>先生/小姐，您好！</view>
    <view>手机号：13800138000</view>
    <view>钱包余额：
      <text style='color:red'>9856</text>
    </view>
  </view>
</view>
<view class='tab'>
  <view>
    <view class='tabBtn active1' bindtap='using'>正在使用</view>
    <view class='icon' wx:if="{{state==='using'}}"></view>
  </view>
  <view>
    <view class='tabBtn' bindtap='record'>使用记录</view>
    <view class='icon' wx:if="{{state==='record'}}"></view>
  </view>
</view>
<view class='tab-pannel' wx:if="{{state==='using'}}">
  <view wx:if="{{show}}">
    <view class='detail' wx:if="{{use1}}" bindtap='use1'>
      <view class='imgDiv'>
        <image class='img active' src='/images/chazuo3.png'></image>
      </view>
      <view class='desc'>
        <view>1号插座</view>
        <view>插座编号：00000000002</view>
        <view>收费模式：
          <text style='color:red'>按电量收费</text>
        </view>
        <view>插座状态：
          <text style='color:red'>使用中</text>
        </view>
        <view></view>
        <view></view>
      </view>
    </view>
    <view class='detail' wx:if="{{use2}}" bindtap='use2'>
      <view class='imgDiv'>
        <image class='img active' src='/images/chazuo3.png'></image>
      </view>
      <view class='desc'>
        <view>2号插座</view>
        <view>插座编号：00000000002</view>
        <view>收费模式：
          <text style='color:red'>按电量收费</text>
        </view>
        <view>插座状态：
          <text style='color:red'>使用中</text>
        </view>
      </view>
    </view>
  </view>
  <view wx:else style='text-align:center;color:#666;font-size:30rpx'>无</view>
</view>
<view class='tab-pannel' wx:if="{{state==='record'}}">
  <block wx:for="{{record}}">
    <view class='detail'>
      <view class='imgDiv'>
        <image class='img' src='/images/chazuo2.png'></image>
      </view>
      <view class='desc'>
        <view>1号插座</view>
        <view>插座编号：{{item.num}}</view>
        <view>开始时间：{{item.ctime}}</view>
        <view>结束时间：{{item.etime}}</view>
        <view>此次消费：
          <text style='color:#E65100'>￥{{item.cost}}</text>
        </view>
      </view>
    </view>
  </block>
</view>
  • wx:if=”{{state===’using’}}” 和 wx:if=”{{state===’record’}}” 这两者判断 state 的值，默认显示‘正在使用’板块，当我们点击使用记录时，利用 js 代码修改 state 为 record , 则使用记录板块显示。
  • <block wx:for="{{record}}">表示遍历 record 数组

record 数组为：

 record:[
      {
        num: '000000000001',
        ctime: '2017-08-14 14:11',
        etime: '2017-08-14 18:11',
        cost: 20
      },
      {
        num:'000000000002',
        ctime: '2017-08-15 14:11',
        etime: '2017-08-16 18:11',
        cost: 202
      },
      {
        num:'000000000003',
        ctime: '2017-08-14 14:11',
        etime: '2017-08-16 18:21',
        cost: 2055
      },
      {
        num:'000000000004',
        ctime: '2017-08-14 14:11',
        etime: '2017-08-11 18:11',
        cost: 2098
      },
      {
        num:'000000000001',
        ctime: '2017-08-14 14:11',
        etime: '2017-08-16 00:11',
        cost: 15
      }
    ]

数组的长度为 5，即使用记录为 5 个。{{item.num}} 指的是获取 record 数组内对象的 num 值，这样便可以实现简单的一串代码实现 5 个 <li> 

<block wx:for="{{record}}">
    <view class='detail'>
      <view class='imgDiv'>
        <image class='img' src='/images/chazuo2.png'></image>
      </view>
      <view class='desc'>
        <view>1号插座</view>
        <view>插座编号：{{item.num}}</view>
        <view>开始时间：{{item.ctime}}</view>
        <view>结束时间：{{item.etime}}</view>
        <view>此次消费：
          <text style='color:#E65100'>￥{{item.cost}}</text>
        </view>
      </view>
    </view>
  </block>

me.js 代码如下

// pages/me/me.js
const app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    state:'using',
    show:true,
    record:[
      {
        num: '000000000001',
        ctime: '2017-08-14 14:11',
        etime: '2017-08-14 18:11',
        cost: 20
      },
      {
        num:'000000000002',
        ctime: '2017-08-15 14:11',
        etime: '2017-08-16 18:11',
        cost: 202
      },
      {
        num:'000000000003',
        ctime: '2017-08-14 14:11',
        etime: '2017-08-16 18:21',
        cost: 2055
      },
      {
        num:'000000000004',
        ctime: '2017-08-14 14:11',
        etime: '2017-08-11 18:11',
        cost: 2098
      },
      {
        num:'000000000001',
        ctime: '2017-08-14 14:11',
        etime: '2017-08-16 00:11',
        cost: 15
      }
    ]
  },
  //点击正在使用改变 state 为 using
  using() {
  //设置本页data数据
    this.setData({
      state: 'using'
    })
  },
  //点击使用记录改变 state 为 record
  record() {
    this.setData({
      state: 'record'
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

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

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  // 页面显示时从全局的data中获取use1,use2并设置，注意必须在顶部 const app = getApp()
    this.setData({
      use1: app.globalData.use1,
      use2: app.globalData.use2
    })
    // 这段代码实现当使用记录为0时，该板块显示内容为‘无’
    // 其原理是将插座1和插座2合并为一个数组，当两者都为false时即没有插座正在使用时，则显示‘无’
    // wxml 使用的是wx:if 和 wx:else
    let arr = new Array(app.globalData.use1, app.globalData.use2)
    if(arr[0] === false && arr[1] === false) {
    // show 控制着 ‘无’的显示或隐藏
      this.setData({
        show:false
      })
    }
    else{
      this.setData({
        show: true
      })
    }
  },
//  点击正在使用的插座1跳转到支付页面并携带参数use=1
  use1(){
    wx.navigateTo({
      url: '/pages/pay/pay?use=1'
    })
  },
  // 点击正在使用的插座2跳转到支付页面并携带参数use=2
  use2() {
    wx.navigateTo({
      url: '/pages/pay/pay?use=2'
    })
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

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

  },

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

  },

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

  },

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

  }
})

效果图：

这里写图片描述

相关的代码作用我已经在文中有所注释，希望你能看得懂
以上就是首页index的全部内容，接下来进入支付页面pay的实现。请移步简单入门小程序 03

小皮咖
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Java入门篇（一）——如何编写一个简单的Java程序
weixin_33961829的博客
01-20 7035
　　最近准备花费很长一段时间写一些关于Java的从入门到进阶再到项目开发的教程，希望对初学Java的朋友们有所帮助，更快的融入Java的学习之中。 　　主要内容包括JavaSE、JavaEE的基础知识以及如何用Java语言编写一个简单的软件、一个小型的游戏、一个简易的项目、或者一些比较复杂的项目实战等等。 　　这些文章我不准备用概念来引入Java知识，因为这些概念类的东西网上各类教程都很齐全，...
简单入门小程序 01
小皮咖的博客
09-27 1371
首先，入门小程序你应该具备的知识和能力有： html ,CSS ,和基础的 javascript 知识 看过小程序的官方文档 了解生命周期 点击这里 进入小程序官方文档阅读 点击这里下载微信web开发者工具并安装1.注册属于自己的小程序及基本配置 前往微信公众平台注册自己的小程序账号并登录点击设置，点击开发设置，获取小程序的appId. 打开微信web开发者工具 在桌面新建一个文件夹Demo 点击
小程序01 入门
多啦的博客
05-30 1489
准备工作 申请账号 点击 https://mp.weixin.qq.com/wxopen/waregister?action=step1 申请账号，拥有自己的小程序账号 安装开发工具 前往 开发者工具下载页面 下载开发工具并安装 app.json app.json扮演的了静态配置的角色，在小程序运行之前就决定了小程序一些表现，需要注意的是小程序是无法在运行过程中去动态更新JS...
通过一个最简单的程序入门Windows编程
热门推荐
刘伟佳的博客
07-12 2万+
这篇文章，我们通过一个最简单的Windows程序，大体感知一下Windows编程。完成我们在Windows编程中的“HelloWorld”。
简单入门小程序03
小皮咖的博客
09-30 405
上一节我们讲到《智慧插座》me 页面的制作，本文接下来讲 pay 支付页面的制作。 本文的知识点有： 参数在小程序内部的传递方法 pay.wxss 代码/* pages/pay/pay.wxss */ .title{ width: 600rpx; display: flex; padding: 20rpx; border-bottom: 1px solid #eee; marg
小程序入门最简单教程(一)
MIYAOW
09-20 1313
最近因公司项目自个也要需要了解下微信小程序开发 首先需要一些前段基础(HTML CSS JS 等....) 数据交互 AJAX  VUE等相关的交互 有玩过就行 简单OOB基础与文档阅读自学能力 我自己有测试号直接上  开发者工具:hhttps://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 开发者文档:...
labview入门练习小程序.zip
05-08
里面包含了30多个labview的入门小程序，适合labview初学者学习各个控件用法的小程序，简单明了，容易理解。
labview简易小程序90例.zip
01-07
适合小白一步一步学习，从简单到适中到复杂，如果认真学习，学好labview不在话下。
微信小程序入门源码.zip
03-05
还不好微信小程序的同学看过来，从0基础开始入门，教你怎么开发小程序，简单易学，一看就懂，一学就会。
wyfeng1：微信小程序简单入门
03-29
选择创建“项目”，填入上文获取到的 AppID ，（无appid直接选择）设置一个本地项目的名称（非小程序名称），比如“我的第一个项目”，并选择一个本地的文件夹作为代码存储的目录，点击“新建项目”就可以了。...
微信小程序入门实例：简易计算器
03-29
今天继续玩一些微信小程序的api来做例子，感觉自己可能创造力不很足，只能模仿着别人的例子来做一个自己的计算器了。老规矩，github源码地址我会附在文章末尾，供大家参考。用微信 ...       今天继续玩一些微信...
小程序如何优化搜索排名，获取曝光
柚鸥ASO优化服务商
04-17 544
开发者应仔细分析目标用户的搜索习惯和需求，选择与之相关的关键词，并在小程序的标题、描述、标签等位置进行合理布局。用户互动也是影响搜索排名的重要因素。因此，开发者应关注小程序的加载速度、界面设计、操作流程等方面，确保用户在使用过程中能够获得良好的体验。此外，还可以通过提供优质的服务和内容，吸引用户留存和分享，进一步提升小程序的曝光度。然而，小程序数量众多，如何让自己的小程序在搜索中脱颖而出，获取更多的曝光和流量，成为众多开发者关注的焦点。小程序的搜索排名优化，就是利用平台的规则，从根源上提高小程序的曝光度。
小程序AI智能名片商城系统：赋能品牌，引领F2B2b营销新风尚！
weixin_70596807的博客
04-20 479
品牌企业如何更好地赋能经销商，提升触达消费者的能力，成为了行业关注的焦点。小程序AI智能名片商城系统以其独特的F2B2b模式，为品牌企业带来了全新的赋能和去中心化解决方案。它将助力品牌企业在数字化时代实现更高效的渠道管理、更精准的消费者触达以及更可持续的发展。
相亲平台app小程序
清兮科技官方博客
04-23 250
例如，根据用户的地理位置和兴趣爱好，推荐附近的活动和场所，帮助用户更好地融入当地生活。同时，根据用户的资料，程序还会自动推荐其他用户作为好友，帮助用户扩大社交圈。此外，根据用户的个人资料和兴趣爱好，程序还会自动匹配符合条件的用户，并推荐给用户，增加用户遇到合适伴侣的机会。在隐私保护方面，用户可以设置个人信息的可见范围和匹配条件，确保自己的隐私和安全。总的来说，相亲平台app小程序是一种方便、高效、安全的在线相亲交友工具，为寻找伴侣的用户提供了丰富的功能和良好的使用体验。
微信小程序webview和小程序通讯
q759859479的博客
04-23 439
1.1需要再小程序嵌入vr页面，同时在vr页面添加操作按钮与小程序进行通信交互1.3 开发工具：uniapp开发小程序1.3原型图点击体验官带看跳转小程序的体验官带看页面点击立即咨询唤起小程序弹窗打电话web-view | uni-app官网 (dcloud.net.cn)
滚动条详解：跨平台iOS、Android、小程序滚动条隐藏及自定义样式综合指南
JINGWHALE
04-21 656
随着用户界面体验提升的要求，滚动条自定义样式以及滚动条隐藏精致化的需求日渐增加，本文详细介绍了小程序、iOS、Android平台滚动条的隐藏方法，以及滚动条一般自定义样式的方法。在保持界面整洁、避免内容溢出的同时，确保用户能够访问所有信息，提升浏览体验。
wx小程序-button的bindtap事件
jsjsjejsj的博客
04-20 323
由于小程序语法中，处理函数不能带参数，所以不能实现直接调用要修改的数据。所以除了用bindtap（提示：bindtap和bind:tap两种语法都是正确的）绑定处理函数，还需要在button属性中添加一个data-(待修改的数据)，这里我们直接命名成data-info。在index.wxml。这里data-info的值给了22，一定要用这种类似差值表达式的{{}}形式，否则直接在双引号里面写22，就是字符串，而不是数字。
美容预约小程序：简单三步，开启高效预约模式
2301_80728471的博客
04-20 361
首先，你需要注册并登录到乔拓云网，这是 一个在线平台，可以帮助你快速创建并管理你的小程序。只需几步操作，你就可以拥有一个专业的小程序，这将大大提升你的美容院的效率和客户满意度。在【控件】选项中，你可以找到各种小控件，例如导航、顶部、侧停分享、侧停客服等。然后，你可以针对模板进行图片、文字、功能、页面、背景等方面的修改。你可以直接拖拽想要的功能模块到页面中指定位置，也可以点击进行详细的编辑。在设计小程序页面，你可以选择适合你美容院风格的小程序模板。完成所有的修改后，你可以点击【预览】来查看你的小程序。
毕业撒花 流感服务小程序的设计与实现
最新发布
m0_61749866的博客
04-23 341
本科毕设，主要是小程序和springboot，引入了k最近邻算法，但是这个k最近邻用的不是很好
微信小程序入门案例
05-24
下面是一个简单的微信小程序入门案例，供参考： 1. 创建小程序项目 首先，在微信开发者工具中创建一个小程序项目，填写相应的项目名称、AppID等信息。创建完成后，可以看到项目中已经自动生成了一些文件和目录。 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值