精华内容
下载资源
问答
  • 微信小程序block标签的作用

    千次阅读 2019-03-19 09:34:26
    因为 wx:if 是一个控制属性,需要将它添加到一个标签上。如果要一次性判断多个组件标签,可以使用一个 <block/> 标签将多个组件包装起来,并在上边使用 wx:if 控制属性。 view1view2 类似 block wx:if,也...

    并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性。

    因为 wx:if 是一个控制属性,需要将它添加到一个标签上。如果要一次性判断多个组件标签,可以使用一个 <block/> 标签将多个组件包装起来,并在上边使用 wx:if 控制属性。

    view1view2

    类似 block wx:if,也可以将 wx:for 用在<block/>标签上,以渲染一个包含多节点的结构块。例如:

    {{index}}:{{item}}

    ---------------------

    中文翻译过来的意思是‘块’,意思就是一大段代码需要一个括号包裹起来一样,形成一块一块

    其实也就类似头条的这个块。如下图。

    这样的好处就是有了block标签过后,你就可以把if 或则 for 语句写在block标签里面这样就控制了这一块的逻辑。

    小程序的开发还是很简单的,官网的文档也比较全。学习的时候只要按照官网的文档来写,哪怕没有前端的开发经验也能够写出像样的小程序来。现在有云端开发了支持数据库接口开发,个人也有服务器了。

    展开全文
  • 经过一年的发展,微信小程序发展火热,本期就介绍下小程序的一些使用。 在安卓中我们经常会使用ListView/GradeView/RecyclerView来实现展示循环数据。那么小程序中怎么到呢。其实很简单,使用block就可以了。 下面...
  • 微信小程序block的使用

    万次阅读 2018-04-01 15:17:30
    经过一年的发展,微信小程序发展火热,本期就介绍下小程序的一些使用。 在安卓中我们经常会使用ListView/GridView/RecyclerView来实现展示循环数据。那么小程序中怎么到呢。其实很简单,使用block就可以了。 下面...

    经过一年的发展,微信小程序发展火热,本期就介绍下小程序的一些使用。

    在安卓中我们经常会使用ListView/GridView/RecyclerView来实现展示循环数据。那么小程序中怎么到呢。其实很简单,使用block就可以了。

    下面我们先看下效果图:

     

    这个布局其实很简单,大致分为3部分,上+下(左75%,右25%)。这里就不在细说了。那么这里要怎么写wxml呢。下面贴代码:

    这边很清晰的可以看出<block></block>这对标签,而数据源便是wx:for="{{goodlist}}"中的goodlist了。接着往下走,我们可以看到点击标签的时候有bindtap事件,这里就不做说明了。我们重点看下{{item.StartCity}},这是什么意思呢,其实这就是获取数据源中的数据,而item代表的是goodlist中的一条数据,StrrtCity等都是数据源中的一些具体属性。你可以更据需要直接调头你想要的字段名就可以了。block到此基本结束了。最后此处设置了一个view,用来代替当数据源为空时显示无数据页面提示。

    下面顺便介绍下数据格式处理(时间格式转化):

    在实际场景中我们可能会需要将时间转化为几分钟前,几小时前,几天前等。那么我们数据库中存放的一般是datetime格式数据。我们需要转化处理。

    处理时间的时候需要注意的是:ios和android上的时间格式不同。ios时间是以2018/04/01,所以需要先将时间格式转化为/格式。不然你的小程序时间转化只会对安卓生效哦。具体转化代码:

    for (var i = 0; i < goodsList.length; i++) {

        var PublishDatetime = goodsList[i].PublishDatetime.replace(/([\d\-]+)T(\d+:\d+)\:.*/, "$1 $2");//将带T的时间格式转化掉.

              PublishDatetime = PublishDatetime.replace(/-/g, "/");// 将格式‘-’转化为‘/’

    //换算时间戳,计算得到与当前时间的差距

              var minute = 1000 * 60;

              var hour = minute * 60;

              var day = hour * 24;

              var halfamonth = day * 15;

              var month = day * 30;

              var now = new Date().getTime();

              var diffValue = now - new Date(PublishDatetime).getTime();

              //console.log("diffValue:" + diffValue);

              if (diffValue < 0) {

                return;

              }

              var monthC = diffValue / month;

              var weekC = diffValue / (7 * day);

              var dayC = diffValue / day;

              var hourC = diffValue / hour;

              var minC = diffValue / minute;

              if (monthC >= 1) {

                if (monthC <= 12)

                  goodsList[i].PublishDatetime = "" + parseInt(monthC) + "月前";//将时间替换掉想要的数据

                else {

                  goodsList[i].PublishDatetime = "" + parseInt(monthC / 12) + "年前";//将时间替换掉想要的数据

                }

              }

              else if (weekC >= 1) {

                goodsList[i].PublishDatetime = "" + parseInt(weekC) + "周前";//将时间替换掉想要的数据

              }

              else if (dayC >= 1) {

                goodsList[i].PublishDatetime = "" + parseInt(dayC) + "天前";//将时间替换掉想要的数据

              }

              else if (hourC >= 1) {

                goodsList[i].PublishDatetime = "" + parseInt(hourC) + "小时前";//将时间替换掉想要的数据

              }

              else if (minC >= 1) {

                goodsList[i].PublishDatetime = "" + parseInt(minC) + "分钟前";//将时间替换掉想要的数据

              } else {

                goodsList[i].PublishDatetime = "刚刚";//将时间替换掉想要的数据

              }

            }

      //最后将转化后的时间重新赋值给数据源

          that.setData({

              goodslist: goodsList,

            });

     

     

    展开全文
  • 踩坑:微信小程序block问题

    千次阅读 2020-04-01 19:33:44
    今天在做微信小程序的时候,遇到了一个坑。原本我的页面都写完了。样式在微信开发工具上显示的没问题。想着就想用真机调试看下,谁知道,图片样式乱了。 解决办法: 通过真机调试,找到问题,原来是图片的宽度没有...

    前言:

    今天在做微信小程序的时候,遇到了一个坑。原本我的页面都写完了。样式在微信开发工具上显示的没问题。想着就想用真机调试看下,谁知道,图片样式乱了。


    解决办法:

    通过真机调试,找到问题,原来是图片的宽度没有设置为100%,设置100%后又运行调试还是不行。细心地我查看Wxml里的代码,注意到一个细节,就是我imgage外层block标签没有渲染。这时我才知道问题的真正所在。问题出在block身上。于是我把block的样式删掉,这样图片继承的就是最外层的盒子的宽度了,果然真机与模拟器上的一样了。


    这里给大家简单的说下block:其实微信开放文档上也写了关于blcok的注意事项:如图

    block不是一个组件,在页面上它也不会被解析渲染。它只是控制它包括元素的显示与否,给它设置宽高是没有用的。我就是给block设置宽后,然后image继承了它的宽,所以样式一直不对,显示的始终是图片的原始样式。


    结尾:

    分享:自律可以帮助你做你不想做但又必须做的事...​!

     

    展开全文
  • 微信小程序 block控制渲染

    千次阅读 2018-04-10 09:52:24
    1、条件渲染 block wx:if  因为 wx:if 是一个控制属性,需要将它添加到一个标签上。如果要一次性判断多个组件标签,可以使用一个 标签将多个组件包装起来,并在上边使用 wx:if 控制属性。 view1 view2 ...

    1、条件渲染 block wx:if

             因为 wx:if 是一个控制属性,需要将它添加到一个标签上。如果要一次性判断多个组件标签,可以使用一个 <block/> 标签将多个组件包装起来,并在上边使用 wx:if 控制属性。

    <block wx:if="{{true}}">
      <view> view1 </view>
      <view> view2 </view>
    </block>
    注意:   <block/>  并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性。

    2、列表渲染 block wx:for

            在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index,数组当前项的变量名默认为 item。类似 block wx:if,也可以将 wx:for 用在<block/>标签上,以渲染一个包含多节点的结构块。例如:

    <block wx:for="{{[1, 2, 3]}}">
      <view> {{index}}: </view>
      <view> {{item}} </view>
    </block>






    展开全文
  • 这次给大家带来微信小程序block应该如何使用,微信小程序block使用的注意事项有哪些,下面就是实战案例,一起来看一下。经过一年的发展,微信小程序发展火热,本期就介绍下小程序的一些使用。在安卓中我们经常会使用...
  • 微信小程序 - 标签

    2019-02-01 15:08:40
    1.1、在小程序中只有被&lt;text&gt;包围的文本才能在手机上被长按选中。   2、&lt;view&gt; 提示 2.1、类似于HTML的&lt;div&gt;。 2.2、&lt;text&gt;&lt;/text&gt;...
  • 微信小程序切换标签改变样式 wxml <!--顶部导航栏--> <view class="swiper-tab"> <view class="tab-item {{currentTab==0 ? 'active' : ''}}" data-current="0" bindtap="swichNav">A</view&...
  • 这篇文章主要介绍了微信小程序block的使用 ,微信小程序最近非常火热,实现起来也很简单,只要block就可以实现,需要的朋友可以参考下经过一年的发展,微信小程序发展火热,本期就介绍下小程序的一些使用。...
  • 微信小程序标签页切换效果是怎么做出来的

    千次阅读 多人点赞 2019-12-11 18:03:33
    ——这当然是通过微信小程序强大的组件和API实现的。 目前为止,笔者知道的可以“完美”实现这一功能的,有两种方式。 1、Swiper组件方式实现 如图 顶部的3个标签页标题用数字0、1、2来表示——这也代表绑定后页面...
  • 微信小程序常用标签、数据绑定、渲染 <!-- 1. text 相当于web中的 span标签 行内元素 不会换行 2. view 相当于web中的 div标签 块级元素 会换行 3. checkbox 以前的复选框标签 --> <text>1</...
  • 微信小程序实现标签页滑块效果

    千次阅读 2018-12-14 13:16:07
    微信小程序实现标签页滑块效果 小程序完整代码: wxml: &lt;view class="swiper-tab"&gt; &lt;view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="...
  • 做任何程序开发要首先找到...这里就是做微信小程序开发的全部官方文档。 知道了文档的位置,下面我们来介绍下如何做一个微信小程序开发: 第一步: 下载微信小程序开发者工具并安装,下载路径: https://mp.weix...
  • 微信小程序--block标签

    2021-02-02 19:52:39
    1.占位符的标签 2.写代码的时候可以看到 3.页面渲染时会去掉
  • 微信小程序标签选择和添加标签

    千次阅读 2019-11-07 14:50:49
    与我之前相关的一个标签的博客(时间选择标签): https://blog.csdn.net/weixin_42418774/article/details/98747230 今天我来说说进阶标签的选择和添加标签: 首先我们看到wxml页面布局: wxml: <view ...
  • 两者的区别是, 是一个组件,会在页面上做渲染;不是一个组件,它仅仅是一个包装元素,只接受控制属性,...block wx:if="{{true}}"> <view> text </view> <view> text </view> </b...
  • 微信小程序block的使用

    千次阅读 2019-02-26 11:35:27
    微信小程序中,block不是一个组件,而是一个包装元素,不会在页面中做任何渲染。 使用情况:条件渲染 wx:if 因为 wx:if 是一个控制属性,需要将它添加到一个标签/组件上,用于控制隐藏与显示。而如果需要一次性控制...
  • 微信小程序时间标签与范围联动设计实现?最近忙于一个有关数据管理的微信小程序开发,遇到了上图情况,虽然很简单,还是整理一下。若有错误,请广大朋友们指正。 使用微信小程序组件radio-group、picker,用wxss对...
  • 最近忙于一个有关数据管理的微信小程序,遇到了上图情况,虽然很简单,还是整理一下。若有错误,请广大朋友们指正。使用微信小程序组件radio-group、picker,用wxss对radio按照需求进行重构,picker里边的start和end...
  • 微信小程序自定义颜色,标签云效果 - wxml代码结构 &amp;amp;amp;amp;amp;amp;amp;amp;lt;view class='content'&amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;...
  • 一、微信小程序的常用标签有哪些? [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QBto7C6T-1617888107657)(C:\Users\liubin\Pictures\微信截图_20210408204116.png)] .wxml后缀的文件...
  • 废话不多说,先上效果图 1. 先新建一个用来存放tabs的文件 tabs.wxml <scroll-view scroll-x="{{true}}" class="scroll" scroll-left="{{transscr}}" scroll-with-...block wx:for="{{items}}" wx:key="...
  • 10分钟入门 - 微信小程序开发

    万次阅读 多人点赞 2019-01-09 21:33:14
    注册微信小程序 如果你还没有微信公众平台的账号,请先进入微信公众平台首页,点击 “立即注册” 按钮进行注册。注册的账号类型可以是订阅号、服务号、小程序以及企业微信,我们选择 “小程序” 即可。 接着填写...
  • 仿淘宝做的一个微信小商城的商品详情界面,点击顶部的宝贝、评论和详情标签时,页面滑动到相应的内容区域,同时滚动页面内容时,自动切换相应的导航标签。当然,这也适应于其他场景。 先来看一下wxml代码,其中一些...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,609
精华内容 2,643
关键字:

微信小程序block标签

微信小程序 订阅