【生意多】-免费发布分类信息
当前位置: 首页 » 新闻 » 教程 » 小程序 » 正文

微信小程序 - 基础 - 002 - WEUI - 一个基本页面的设计 - in

放大字体  缩小字体 发布日期:2020-09-12 21:24:07    浏览次数:10
导读

  我们该去吃喝嫖赌而不是在这吃读研的苦: 可不可以找出极值的同时计算出来他们的均值以及标准差?可以指点一下么?谢谢  weixin_48711241: 我美国带回来的机器锁了,找大哥解开了,2094741453这师傅的Q,很厉害加他  项目的结构如上图,如果收紧所有的项目文件,我们发现在项目的根目录有四类配置配置文件,这四类

  我们该去吃喝嫖赌而不是在这吃读研的苦: 可不可以找出极值的同时计算出来他们的均值以及标准差?可以指点一下么?谢谢

  weixin_48711241: 我美国带回来的机器锁了,找大哥解开了,2094741453这师傅的Q,很厉害加他

  项目的结构如上图,如果收紧所有的项目文件,我们发现在项目的根目录有四类配置配置文件,这四类文件是整个项目的配置文件。对于构造一个页面来说,如果不进行配置,那么根目录的配置就是你的配置。当然,由于是根目录,所以,没有针对某一个页面的结构设计,但是,有针对页面的样式设计。

  现在我们实践看一下,给出的 Demo里面的页面是如何设计的,首先,看一个index的页面,index的页面在app.json的配置文件里面被配置在首页,也就是第一个出现的页面。

  前面说道1区的定义是定义整个项目页面的规范,那么2区的定义则可以覆盖1区的定义,对页面index进行设置:

  至此,我们页面的基础元素以及介绍了一下,下面我们实践的研究一下,一个index页面的制作过程,

  在视图容器下面,有view、scroll-view、swiper等,在设计的时候用list的数据结构来规范,数据的组织在index.js里面,

  我们可以看到对应的关系,视图容器项目,默认是关闭的false,然后他的id是view,视图容器包括三个分页面:view、scroll-view、swiper。

  上面这段函数显然对显示项目的次级菜单展看进行了控制,数据最后通过:setData把数据更新到页面。

  给出的是三个参数,什么意思呢,第一个参数表述上下都是0rpx,然后,右边是30rpx,左边是40rpx,

  kind-list在block块里面,通过微信程序的选取来执行一下操作,list是js定义好的数据组织,其中有一个属性是id,

  这里选取key在后面,是维护页面这个属性值的显示固定(不因为增加一个项目,或者项目的其他属性的自己变更而受到影响)。

  标签block 和 标签view的区别,view为视图层容器,在微信的说明里面有定义,而block为不在视图层显示的一个标识定义区块。在组件的定义表里面,也没有block的说明。

  上面的表述是,view容器后面跟了一个class的,kind-list-item,她负责如下渲染

  这段的意思是: 在js的定义的item.id里面,选取一个当前的item.id进行显示(view 视图容器),基础样式用的是kind-list-item-bd,

  我们看定义,这里opacity是表示透明度,值从(0 ~ 1),那么个0.2的透明度显然是半透明的,效果如下:

  现在我们回到刚才的那个语句,因为后面还有一个部分没有讲解,bindtap=kindToggle

  这里我们可以看到,在页面手指触发了页面view视图容器的区域后,将触发容器的事件绑定,而这个事件处理的目标就是把list的打开关闭属性进行了设置,也就是触摸后打开了下一级的视图。

  这里定义了一个view视觉容器,采用的样式为,kind-list-item-bd,然后,根据,item.open,打开的状态,附加样式为

  做最外层循环,这里list里面的数组元素,就变为item了,item有4个属性,其中一个是pages,

  然后,用wx:for-items,对list里面的pages属性内嵌数组做了遍历循环,注意,后面又立即跟了wx:for-item=page,注意,这里没有s,就是对item的元素pages数组的元素重新命名为page了,后面的page操作,就是对这个内嵌数组操作。

  是小程序页面内的一个跳转, 注意后面的class,是样式的定义,class后面的navigator需要重新定义,

  小结:至此,对小程序官方组件展示的主页面的index的页面制作分析结束了,欢迎讨论,有不对的地方,欢迎指正。

 
(文/小编)
打赏
免责声明
• 
本文为小编原创作品,作者: 小编。欢迎转载,转载请注明原文出处:http://www.31duo.com/news/show-530973.html 。本文仅代表作者个人观点,本站未对其内容进行核实,请读者仅做参考,如若文中涉及有违公德、触犯法律的内容,一经发现,立即删除,作者需自行承担相应责任。涉及到版权或其他问题,请及时联系我们。
 

(c)2016-2019 31DUO.COM All Rights Reserved浙ICP备19001410号-4

浙ICP备19001410号-4