效果图: 实现效果图红色线包含部分的九宫格效果,并附带item点击时间. ------------------------------------------------------------------------------------------------------  具体实现:  1.首先添加图片资源文件   在项目根目录新建一个目录,取名为images , 用于存放图片资源,然后添加进入几张图片  2.在home目录下的home.js 文件中(参照前两篇小程序实践文章) 进行数据…

微信展示列表效果借助于 wx:for  简单写一个列表(wxml文件中): 对应的数据源(js文件中): 写一个点击监听: 效果: 以上.可以实现列表的item点击效果,但是无法到点击的item对应的数据源数据 --------------------------------------------------------------------------------------------------- 解决方法: 给有点击事件的组件添加一个 data-any  属性 any可以是任意数据类…

显示模态对话框,确定和取消两个选择+标题+内容的对话框 . // 编辑用户性别 tapSex:function(res){ var that = this wx.showModal({ title: '选择性别', content: '', cancelText:'女', confirmText:'男', success(res){ if(res.cancel){ // 用户点击了取消属性的按钮,对应选择了'女' that.setData({ userSex: }) }else if(res.c…

textarea是官方的原生组件,用于多行输入 简单的例子,监听文本内容.长度,以及设置最大可输入文本长度 wxml <view class='textarea-Style'> <textarea placeholder='请输入文字' value='{{contentStr}}' bindinput="getWords" maxlength='{{maxTextLen}}'></textarea> <view class='contentNu…

涉及知识点: 1.垂直排列,水平排列 2.居中对齐 示例: 1.默认排版 , 一个父组件里面两个子view 显示效果: 2.先给父view设置一个高度和颜色值,用于看效果 3.实现水平排列和垂直排列的样式  水平排列:    ------>  垂直排列(不进行设置,默认垂直排列): ------> 4.实现居中效果  居中效果分为两种情况,依赖于3中的水平排列还是垂直排列.  ①.当水平排列的时候  , justify-content:center ; 决定水平居中  ------------…

swiper组件类似于Android中的ViewPager,实现类似轮播图的效果,相对于Android的Viewpager,swiper实现起来更加方便,快捷. 效果图: 首先看下swiper支持的属性: ------------------------------------------------------------------------------------   具体实现轮播功能:    一.添加轮播图片素材   在项目根目录下新建一个目录用于存储图片资源,目录名随意       …

官方文档 效果图: 实现底部Tab选项,只需要在项目根目录下的app.json下修改 如图: ------------------------------------------------------------------------------------------------------  先介绍一下app.json文件 默认有两个代码块: .pages 这里注册了当前小程序的所有页面路径 .window 这里用于设置小程序的状态栏.导航条.标题.窗口背景色. 以上两个详细使用参考文档…

原文:微信小程序把玩(三)tabBar底部导航 tabBar相对而言用的还是比较多的,但是用起来并没有难,在app.json中配置下tabBar即可,注意tabBar至少需要两个最多五个Item选项 主要属性: 对于tabBar整体属性设置: 对于tabBar中每个Item属性设置: 下面是官网一张图对tabBar描述: app.json的配置相对就简单了:…

微信小程序开发:学习笔记[8]——页面跳转及传参 页面跳转 一个小程序拥有多个页面,我们可以通过wx.navigateTo推入一个新的页面.在首页使用2次wx.navigateTo后,页面层级会有三层,我们把这样的一个页面层级称为页面栈. 后续为了表述方便,我们采用这样的方式进行描述页面栈:[ pageA, pageB, pageC ],其中pageA在最底下,pageC在最顶上,也就是用户所看到的界面,需要注意在本书编写的时候,小程序宿主环境限制了这个页面栈的最大层级为10层 ,也就是当页面栈…

今天在做微信小程序时,设置wx.navigateTo页面跳转并传参数,点击始终没有效果,代码如下: //事件处理函数 newsDetail: function (event) { console.log(event), //带id跳转到指定的页面,这里的event.currentTarget.dataset.id是获取wxml页面上的data-id参数,详见事件说明 wx.navigateTo({ url: "../detail/detail?id="+event.currentTar…