![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
微信小程序
itfallrain
勤思,善学,知行,思敏,体健,豁达。
展开
-
微信小程序用js控制类名的切换用于改变不同的样式
有时候,界面文字可能会很多,我们一开始设计界面的时候一定希望让他展示出来几行就行了,如果用户需要查看隐藏的部分,点击展开详情就能把剩余的内容显示出来。方法可能有些不好,但是实现功能了,有更好的方法可以一起交流哦配图解释设计样式:展开样式test.wxml<view class='writ' wx:for="{{writ}}">//从js里面引入数据 <view...原创 2019-01-01 09:28:26 · 5157 阅读 · 0 评论 -
微信小程序下拉选项框
效果图test.js/** * 页面的初始数据 */ data: { shows: false, //控制下拉列表的显示隐藏,false隐藏、true显示 selectDatas: ['消费账户', '平台返利账户', '微信钱包'], //下拉列表的数据 indexs: 0, //选择的下拉列 表下标, }, // 点击下拉显示框 s...原创 2019-02-18 11:55:06 · 36933 阅读 · 4 评论 -
微信小程序选项卡swiper默认高度150px(让高度实现自适应)怎么解决?
首先:个人感觉这是小程序的一个bug(相信以后会修复的),默认高度是150px,而且不能通过css控制让高度自适应(就是给高一个auto,在这里不起作用!!!),百度了好多方法,觉得有用的是给swiper加个固定高100vh(数据有限可以用一下),但这治标不治本啊,如果有好多数据(不如百十条)那么超过100vh高度之后的就不显示了,正题 :首先讲一下,我的逻辑思路在swiper标签下有一个标签...原创 2019-02-17 10:30:06 · 31363 阅读 · 8 评论 -
小程序轮播
效果图:test.wxss.swiperAll { width: 100%; overflow: visible; height: 380rpx;}.swiperItem { box-sizing: border-box; border-radius: 20rpx; padding: 0 48rpx;}.slide-image { margin-top...原创 2019-02-16 15:15:53 · 296 阅读 · 0 评论 -
微信小程序通过js循环传值为空时怎么让该标签隐藏不显示,(附图片)
其实两个图片你应该就能看明白了,代码就是让你实践用一下,好比第一张图片上面标注出来的三个方框,和下面标注出来的一个方框,其实就是通过两次循环得出来的,只不过第一次需要三个标签,第二次需要一个标签,那么后面的标签就需要隐藏,怎么隐藏呢?那你就看第二张图片喽,在text标签里面加个判断就好喽。效果图test.js// pages/my/sellout/sellout.jsvar app =...原创 2019-02-15 10:05:36 · 3586 阅读 · 0 评论 -
微信小程序之选项卡的实现方法
微信小程序里没有自带选项卡组件,但是却带有swiper组件,所以,我们便利用swiper来实现选项卡的功能。先看效果图:test.wxml<view class="swiper-tab"> <view class="swiper-tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="cli...原创 2019-02-14 16:36:05 · 726 阅读 · 0 评论 -
微信小程序怎么把前端for循环的index值让当前页的js获取到
前端页面有四个选项卡,绑定一个点击事件,然后把index的值绑定到data-id上,然后你点击哪一个就会获取哪一个的index的值,比如我点击了“参与会员”,那么就会获取到1js通过点击获取到的下标进行选项卡的切换test.wxml&lt;scroll-view class='scroll' scroll-x="true" style="width: 100%"&gt; &a原创 2019-01-03 11:29:57 · 9918 阅读 · 0 评论 -
微信小程序点击事件绑定,实现页面跳转
例如,我在图片上绑定了一个点击事件bindtap。test.wxml <image bindtap='onmoney' mode='aspectFill' src='{{pic}}'></image>test.js /** * 图片点击跳转 */ onmoney: function(opotions){ wx.navigateT...原创 2019-01-03 09:07:21 · 8633 阅读 · 1 评论 -
微信小程序 选项卡的简单实例
效果图实现的功能:点击上面选项卡,下面商品内容实现切换,滑动下面的商品页面,上面的选项也随页面进行切换。text.wxml:&lt;!-- 分类 --&gt;&lt;view class='listMiddle swiper-tab'&gt; &lt;view class='middle {{currentTab==0? "action" : "&a原创 2019-01-11 18:59:12 · 1575 阅读 · 0 评论 -
微信小程序快速设置底部导航栏
效果图下面直接上代码吧1:找到项目根目录中的配置文件 app.json 加入如下配置信息"tabBar": { "color": "#a9b7b7", "selectedColor": "#11cd6e", "borderStyle": "white", "list": [ { &q原创 2019-01-11 15:56:16 · 2702 阅读 · 0 评论 -
小程序view标签水平垂直居中
效果图:test.wxss代码/* 让view标签居中显示 */.bgd{ height: 200rpx; display: flex; background: black; align-items: center; justify-content: center;}/* 控制view标签 */.bg{ height: 100rpx; width: 90%...原创 2019-01-01 15:37:27 · 3984 阅读 · 0 评论 -
小程序弹窗
test.jsdata: { modalHidden: true, }, /** * 显示弹窗 */ buttonTap: function () { this.setData({ modalHidden: false }) }, /** * 点击取消 */ modalCandel: function...原创 2019-02-19 10:11:05 · 299 阅读 · 0 评论