微信小程序block的使用教程

这篇文章主要介绍了微信小程序block的使用 ,微信小程序最近非常火热,实现起来也很简单,只要block就可以实现,需要的朋友可以参考下

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

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

下面我们先看下效果图:

微信小程序block的使用教程

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

微信小程序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 = 1) {   if (monthC = 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 = "刚刚";//将时间替换掉想要的数据   }  } //最后将转化后的时间重新赋值给数据源

登录后复制

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

AJAX +SpringMVC 实现bootstrap模态框的分页查询功能

完美解决ajax跨域请求下parsererror的错误

ajax提交手机号去数据库验证并返回状态值

以上就是微信小程序block的使用教程的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2755856.html

(0)
上一篇 2025年3月8日 07:21:17
下一篇 2025年3月8日 07:21:25

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 微信小程序实现全局搜索代码高亮的示例

    本篇文章主要介绍了微信小程序实现全局搜索代码高亮的示例,现在分享给大家,也给大家做个参考。 需求 最近在做微信小程序的时候,需要实现在搜索框的输入内容的时候实现全局匹配实现高亮效果,目前的思路是,递归后台来返回的数据,并将对象的value值…

    编程技术 2025年3月8日
    200
  • 怎样用mpvue构建小程序

    这次给大家带来怎样用mpvue构建小程序,用mpvue构建小程序的注意事项有哪些,下面就是实战案例,一起来看一下。 mpvue是一个使用Vue.js开发小程序的前端框架(美团的开源项目)。框架基于Vue.js核心,mpvue修改了Vue.j…

    2025年3月8日
    200
  • 怎样进行mpvue小程序项目搭建

    这次给大家带来怎样进行mpvue小程序项目搭建,进行mpvue小程序项目搭建的注意事项有哪些,下面就是实战案例,一起来看一下。 前言 mpvue 是美团开源的一套语法与vue.js一致的、快速开发小程序的前端框架,按官网说可以达到小程序与H…

    2025年3月8日
    200
  • 如何实现在微信小程序中长按删除图片

    这次给大家带来如何实现在微信小程序中长按删除图片,实现在微信小程序中长按删除图片的注意事项有哪些,下面就是实战案例,一起来看一下。 说明 最近在学小程序,遇到长按图片删除的问题,特此记录,记录自己的成长轨迹 需求: 长按删除指定图片 需要解…

    2025年3月8日
    200
  • 微信小程序之分享页面如何返回首页的示例

    这篇文章主要介绍了微信小程序之分享页面如何返回首页的示例,现在分享给大家,也给大家做个参考。 做小程序开发发现,页面分享出去后,用户通过分享进去的页面很难找到返首页的情况。(微信官方操作是点击右上角三个点,在手机下方显示返回首页)。民间很多…

    2025年3月8日
    200
  • 怎样实现微信小程序的自定义多选事件

    这次给大家带来怎样实现微信小程序的自定义多选事件,实现微信小程序的自定义多选事件注意事项有哪些,下面就是实战案例,一起来看一下。z 要实现下图的效果(自定义多选单选),大多数公司项目的多选框都是自己设计的,所以用原生标签或者组件是不可行的,…

    2025年3月8日
    200
  • 怎样实现微信小程序使用form表单获取输入框数据

    这次给大家带来怎样实现微信小程序使用form表单获取输入框数据,实现微信小程序使用form表单获取输入框数据的注意事项有哪些,下面就是实战案例,一起来看一下。 1、效果展示 2、关键代码 index.wxml 用户名: 密码: 登录 重置 …

    2025年3月8日
    200
  • 微信小程序实现换肤功能

    这篇文章主要为大家详细介绍了微信小程序实现换肤功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 pc或者移动端实现换肤功能还是比较简单的,大致就是需要换肤的css,还有正常的css;把当前皮肤类型存入本地;然后通过js读取并判断当前应…

    2025年3月8日
    200
  • 微信小程序中实现手指缩放图片的示例代码

    本篇文章主要介绍了微信小程序中实现手指缩放图片的示例代码,现在分享给大家,也给大家做个参考。 公司开发微信小程序,pm想实现如下需求: 用手指缩放图片。其实在实现这个需求以前,并不知道,微信公众号以及微信小程序里面有一个原生的api就自带这…

    编程技术 2025年3月8日
    200
  • 如何给mpvue制作出的小程序markdown适配

    这次给大家带来如何给mpvue制作出的小程序markdown适配,给mpvue制作出的小程序markdown适配注意事项有哪些,下面就是实战案例,一起来看一下。 mpvue 的核心目标是提高开发效率,增强开发体验。使用该框架,开发者只需初步…

    2025年3月8日
    200

发表回复

登录后才能评论