微信小程序第三章作业

这篇具有很好参考价值的文章主要介绍了微信小程序第三章作业。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

分析题

分析下列代码,实现页面布局

index.wxml代码:

<view class="content">

<view class="layout-top">

<view class="screen">3x8</view>

</view>

<view class="layout-bottom">

<view class="btnGroup">

<view class="item orange">C</view>

<view class="item orange">←</view>

<view class="item orange">#</view>

<view class="item orange">+</view>

</view>

<view class="btnGroup">

<view class="item blue">9</view>

<view class="item blue">8</view>

<view class="item blue">7</view>

<view class="item orange">-</view>

</view>

<view class="btnGroup">

<view class="item blue">6</view>

<view class="item blue">5</view>

<view class="item blue">4</view>

<view class="item orange">x</view>

</view>

<view class="btnGroup">

  <view class="item blue">3</view>

<view class="item blue">2</view>

<view class="item blue">1</view>

<view class="item orange">÷</view>

</view>

<view class="btnGroup">

  <view class="item blue zero">0</view>

  <view class="item blue">.</view>

  <view class="item orange">=</view>

</view>

</view>

</view>

index.wxss代码:

.container { 

  display: flex;

  flex-direction: column;

   align-items: center;

   background-color: #ccc;

   font-family: "Microsoft YaHei";

   height: 100%;

   overflow: hidden;

}

.layout-top{

  width: 100%;

  margin-bottom: 30px;

}

.layout-bottom{

  width: 100%;

}

.screen{

  text-align: right;

  width: 100%;

  line-height: 130px;

  padding: 0 10px;

  font-weight: bold;

  font-size: 60px;

box-sizing:border-box;

border-top:1px solid #fff;

}

.btnGroup{

  display: flex;

  flex-direction: row;

  flex: 1;

  width: 100%;

  height: 4em;

  background-color: #fff;

}

.item{

  width: 25%;

  display: flex;

  align-items: center;

  flex-direction: column;

  justify-content: center;

  margin-top: 1px;

  margin-right: 1px;

}

.zero{

  width: 50%;

}

.orange{

  color: #fef4e9;

  background: #f78d1d;

  font-weight: bold;

}

.blue{

  color: #d9eef7;

  background-color: #0095cd;

}

app.wxss代码:

.container { 

  display: flex;

  flex-direction: column;

   align-items: center;

  justify-content: space-between;

   height: 100%;

   padding: 200px 0;

}

效果图:

微信小程序第三章作业,微信小程序,notepad++,小程序

操作题

分析结构,实现布局

实列图:

微信小程序第三章作业,微信小程序,notepad++,小程序

步骤一

在index文件夹下创建一个名为tp的文件夹,用来放图片素材

微信小程序第三章作业,微信小程序,notepad++,小程序

步骤二,代码
index.json代码

{

  "navigationBarBackgroundColor": "#000000",

  "navigationBarTitleText": "趋势",

  "navigationBarTextStyle": "white",

  "backgroundTextStyle": "dark"

}

index.wxml代码

<view class="su">

  <view class="buju"style="padding:8px">

    <view class="one">行业趋势指南   ∨</view>

    <view class="two">年度趋势指南   ∨</view>

  </view>

  <view class="fo" style="border-bottom: 1px solid darkgrey;padding: 1px;"></view>

  <view class="neirong" style="padding: 12px;">

      <view class="yi" style="border-bottom:3px solid #000;">最新发布</view>

      <view class="er">单品</view>

      <view class="san">色彩</view>

      <view class="si">风格</view>

      <view class="wu">细节</view>

      <view class="liu">面料</view>

  </view>

  <view class="yans" style="padding-top: 1px;">

  <view class="w" style="border: 2px solid rgb(34, 31, 31);width: 240px;height: 140px;margin: 10px;background-image:url('/pages/index/tp/1.jpg');background-position: center center;background-size: cover;"></view>

  <view class="y" style="border: 2px solid #000;width: 240px;height: 140px;margin: 10px;background-image:url('/pages/index/tp/2.jpg');background-position: center center;background-size: cover"></view>

</view>

<view class="mm">

  <view class="l" style="border: 2px solid #000;width: 240px;height: 140px;margin: 10px;background-image:url('/pages/index/tp/3.jpg');background-position: center center;background-size: cover"></view>

  <view class="k" style="border: 2px solid #000;width: 240px;height: 140px;margin: 10px;background-image:url('/pages/index/tp/4.jpg');background-position: center center;background-size: cover"></view>

</view>

  <view class="mm">

  <view class="p" style="border: 2px solid #000;width: 240px;height: 140px;margin: 10px;background-image:url('/pages/index/tp/5.jpg');background-position: center center;background-size: cover"></view>

  <view class="s" style="border: 2px solid #000;width: 240px;height: 140px;margin: 10px;background-image:url('/pages/index/tp/6.jpg');background-position: center center;background-size: cover"></view>

  </view>

</view>

index.wxss代码

.su{

  height: 100%;

}

.buju,.neirong{

  display: flex;

  justify-content:space-around;

}

.mm{

  display: flex;

  flex-direction: row;

}

.yans{

  display: flex;

  flex-direction: row;

}


效果图:

微信小程序第三章作业,微信小程序,notepad++,小程序文章来源地址https://www.toymoban.com/news/detail-843413.html

到了这里,关于微信小程序第三章作业的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

原文地址:https://blog.csdn.net/bnxpro/article/details/136780098

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 移动开发技术_微信小程序_第三章测试

    作答记录 1 【单选题】下列关于小程序生命周期函数说法不正确的是( )。(5.0分) A、 分为应用生命周期函数和页面生命周期函数两种 B、 在onLoad生命周期函数中可以获得地址中的参数 C、 onLaunch生命周期函数是小程序初始化完成时触发 D、 onLaunch 生命周期函数会被重复执

    2024年02月09日
    浏览(5)
  • 微信小程序开发实战课后习题解答————第三章(作业版)

    一、填空题 1、微信小程序中用    navigationBar      组件可以实现导航栏 2、 微信小程序中能够实现轮播效果的组件是    swiper    3、 微信小程序中实现滚动条事件的绑定方法是    bindscroll   4、 微信小程序中引入音频的组件是   InnerAudioContext   5、 微信小程序中控

    2024年02月09日
    浏览(10)
  • 南京邮电大学程序设计类教辅平台c++第三章作业编程题答案

    南京邮电大学程序设计类教辅平台c++第三章作业编程题答案 1.5.1构建一个类,含有三个数据成员,分别表示立方体的三条边长;含有构造函数(默认边长为3,2,1)和一个用来计算立方体体积的成员函数Compute()。 main()函数如下,请复制使用 代码: 2.设计一个Car类,它的数

    2023年04月20日
    浏览(9)
  • python第三章作业(初级)

    任务描述 输入三个数a,b,c, 判断能否以它们为三个边长构成直角三角形。若能,输出YES,否则输出NO。 输入格式‪‬‪‬‪‬‪‬‪‬‮‬‪‬‭‬‪‬‪‬‪‬‪‬‪‬‮‬‪‬‪‬‪‬‪‬‪‬‪‬‪‬‮‬‫‬‪‬‪‬‪‬‪‬‪‬‪‬‮‬‪‬‪‬ 输入包括三行,每行

    2023年04月10日
    浏览(12)
  • 第三章作业:关系数据库

    同一个关系模型的任意两个元组值(C ) A 必须全同 B 可全同 C 不能全同 D 以上都不是 设W=R∞S,且W,R,S的元组个数分别为p,m,n,那么三者之间满足 D。 A. p(m+n) B. p≤(m+n) C. p(m×n) D. p≤(m×n) σF1(σF2(E))与 A 等价。 A. σF1∧F2(E) B. σF1(E) C. σF2(E) D. σF1∨F2(E) 设关系R和S的属性个数分别

    2023年04月25日
    浏览(16)
  • 【头歌-Python】Python第三章作业(初级)(1~12)

    如果代码存在问题,麻烦大家指正 ~ ~ 有帮助麻烦点个赞 ~ ~ 任务描述 输入三个数a,b,c, 判断能否以它们为三个边长构成直角三角形。若能,输出YES,否则输出NO。 输入格式‪‬‪‬‪‬‪‬‪‬‮‬‪‬‭‬‪‬‪‬‪‬‪‬‪‬‮‬‪‬‪‬‪‬‪‬‪‬‪‬‪‬‮‬‫‬

    2024年02月02日
    浏览(73)
  • python头歌实践教学平台-python第三章作业(初级)

    第1关 判断是否直角三角形 第2关 今年多少天? 第3关 判断三角形并计算面积 第4关 身高测算 第5关 个税计算器 第6关 判断闰年 第7关 分段函数B 第8关 百分制成绩转换五分制E 第9关 正负交错数列前n项和 第10关 求数列前n项的平方和 第11关 百钱买百鸡A 第12关 用户登录

    2024年02月02日
    浏览(26)
  • C++[第三章]--程序结构

    class里面的函数实现可以放到class外面实现,class里面声明即可。所以这部代码可以放到.h文件中如: 在cpp里面实现这些函数即可如: 多个cpp文件出现同名函数(非类里面的函数)会混淆。 定义:.h/.cpp文件中: 调用者源文件中: 直接使用: a::fun, a::fun2 using声明: using a::fun; // 以后

    2024年02月15日
    浏览(7)
  • 第三章-Java的基本程序设计结构

    2024年02月03日
    浏览(13)
  • 从程序员到产品经理 第三章:用户研究和体验设计

    目录 用户研究的方法和技巧 用户行为分析和用户画像 产品设计的原则和流程

    2024年02月02日
    浏览(15)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包