hover:class  :定义容器在被触发时的样式 通常无用,但若不去除则影响用户体验: 为避免被覆盖,约定在wxss底部添加class,比如: <!-- wxml --> <navigator class="index-nav_box" hover-class="noshadow"> <image></image> <view class="index-nav-des">现采蓝莓1斤

小程序navigator跳转路径url要写  要跳转的的页面文件夹相对于当前页面的页面文件夹的位置,即相对路径. 比如我当前页面跳转到同级目录下的另一个页面如下: <navigator url="../todoDetail/todoDetail?id={{item.id}}"><icon type="info_circle" size="23" color="#3478f6" class="icon

当用户输入账号或者密码的时候,可能会有输入空格的情况,但是实际需要是不能够有空格的,所以我们要做一个去除空格,并且适应所有input的name参数的方法,下面请看源码: wxml: <input type='text' data-name='account' value='{{account}}' name="account" bindinput='verification' bindblur='account_val'></input> js: verific

这次我主要想总结一下微信小程序实现上下滚动消息提醒,主要是利用swiper组件来实现,swiper组件在小程序中是滑块视图容器. 我们通过vertical属性(默认为false,实现默认左右滚动)设置为true来实现上下滚动.  (需要注意的是:只要你的swiper存在vertical属性,无论你给值为true或者false或者不设参数值,都将实现上下滚动) 从深圳回来做了一个微信小程序的小项目,令人欣慰的一点事是,回来很快时间内把在深圳两天的房租给赚回来了,哈哈... 从深圳回来做了一个微信小

在做一个短视频平台,涉及到的都是一些列表模块.因为小程序没有提供lazyload api,所以只能自己写一个了... 开发涉及 <scroll-view></scroll-view>滚动机制及queryMultipleNodes方法,不清楚的请自行查阅api文档. html代码: <swiper-item class='slider-swiper' style='height:100%'> <scroll-view scroll-y='true' style=&q

//目前小程序没有fadeIn(),fadeOut()方法所以还是本方法手写  <!--wxml--><!--蒙版(渐出淡去效果)--><view class="aa" style='height: {{winH}}rpx;opacity: {{opacity}};'></view><!--正式内容(渐入加深效果)--> <view class="container log-list" style='

如果是小程序自身页面的跳转 <navigator  open-type="navigate" target="self" url="targetUrl></navigator> 如果是小程序A跳小程序B的页面 <navigator open-type="navigate" target="miniProgram" app-id="wxAppId" path="

今天在做小程序的时候,发现用navigator无法进行跳转.url 路径也是对的. 后面发现是因为我需要跳转的页面定义在了tabBar里面的.如下图: 如果需要跳转到tabBar里面定义的这些页面,需要用到wx.switchTab({})进行跳转.如下图: 再把这个事件绑定在你点击的元素上面即可:

什么是事件? 事件是视图层到逻辑层的通讯方式. 事件可以将用户的行为反馈到逻辑层进行处理. 详解(以常见的tap点击事情为例) 模板.wxml代码: <view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view> JS文件代码: 1.先导 在Android中,我们Activity和Fragment都有栈的概念在里面,微信小程序页面也有栈的概念

在编写小程序时遇到一个问题:使用 <navigator url='/pages/lists/index'>...</navigator>进行跳转没有反应.控制台也没有报错,app.json页也已经定义路径.网友得出的结论是因为tabtar里定义了一样的路径,导致其他地方不能重复使用. 目前的解决方法:将跳转标签改为view标签,并添加事件,实测有效: wx.redirectTo({ url: 'test?id=1' })

传统的web开发者进入小程序的时候,可能有几个映射疑问: div  - > view a -> navigator携带参数传值(a标签应该是根据内容来撑高,而navigator就不会根据内容撑高) span - > text 后面的映射也差不多是这样...

在编写小程序时遇到一个问题:使用 <navigator url='/pages/lists/index'>...</navigator>进行跳转没有反应.控制台也没有报错,app.json页也已经定义路径.网友得出的结论是因为tabtar里定义了一样的路径,导致其他地方不能重复使用. 在编辑微信小程序的时候,遇到的坑,使用 <navigator url='/pages/logs/logs'>跳转</navigator>进行跳转失效 了,进行多次测试发现, 当

在一些app中,随处可见左滑动的效果,在微信小程序中,官方并未提供相关组件,需要我们自己动手写一个类似的效果 下面仅列举出核心代码,具体的优化需要根据你自身的需求 <view class='list' wx:if="{{list.length > 0}}"> <block wx:for="{{list}}" wx:key="list"> <view class='list_item' bindtap='toRe

仿了潮汐睡眠小程序的代码.[如果有侵权联系删除 最近做的项目有个弹出层效果,类似音乐播放器那种.按照普通的做了一般感觉交互不是很优雅,设计妹子把潮汐睡眠的弹层给我看了看,感觉做的挺好,于是乘着有空仿照了一下. 首先善用度娘反编译弄到了源码,但是打不开.然后自己研究源码发现他们用的是movable-view实现的. 于是仿照着搭出了基础框架. 新建了个组件 wxml <!--components/playpanel/playpanel.wxml--> <movable-area style

小程序吸顶效果 <!--index.wxml--> <view class="container"> <view class='outside-img'> <view class='outside-box'> <image class='show-eg-img' src='https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1

解决方法一: navigator 的 open-type 设置为 switchTab 解决方法二: 使用 wx.switchTab({ url: ‘../cart/index’ }) 进行跳转

<navigator hover-class="none">

效果: wxml代码: <view class='spellNum'> <view> <text style='color: #fff;'>团长</text> <image src='{{shift}}'></image> </view> <image wx:for="{{head}}" src='{{item.buyer_avatar}}'></image> <view

navigator的open-type属性 可选值 'navigate'.'redirect'.'switchTab',对应于wx.navigateTo.wx.redirectTo.wx.switchTab的功能 open-type="navigate"等价于API的 wx.navigateTo 而wx.navigateTo的url是需要跳转的应用内非 tabBar 的页面的路径 open-type="redirect"等价于API的 wx.redirectTo 而

1.最终效果 2.技术点:a. css3 clip-path , b.根据角度和直边计算另一个直边的长度 3.实现思路: a.3个层(灰色圆形层, 红色圆形层,白色圆形层)  ,其中灰色和红色层大小一样, 白色比灰色的小一个环形. b.通过8个角度百分百分析红色层的剪切点剪切出不同的图形 4.代码 wxml代码: <view class="chart"> <view> <view> <span style="clip-path: po

"tabBar": { "selectedColor": "#4da9ff", //颜色 "list": [{ "pagePath": "homepage/homepage/homepage", "text": "首页", "iconPath": "images/homepage_off.png", &quo