小程序之Tab切换(二)】的更多相关文章

微信小程序之tab切换效果,如图: 最近在学习微信小程序并把之前的公司app搬到小程序上,挑一些实现效果记录一下(主要是官方文档里没说的,毕竟官方文档只是介绍功能) .wxml代码: <view class="body"> <view class="nav bc_white"> <view class="{{selected?'red':'default'}}" bindtap="selected"…
之前写的那个Tab切换是常规逻辑写的,接下来我会列出小程序api自带的写法,当然了 这个写法更加简单,实用.我们只需要配置app.json这个文件即可. 先看效果图: app.json代码:(有木有感觉很简单的样子哈哈) "tabBar": { "color":"#fff", "selectedColor":"#1296db", "backgroundColor":"#ccc&…
好久没有写东西了   今天写一个简单的东西 小程序tab切换 (选项卡功能) .wxml <view class="swiper-tab"> <view </view> <view </view> </view> <swiper current="{{currentTab}}" bindchange="swiperTab" style="height:{{swiperHe…
小程序越来越火了,作为一名,额  有理想的攻城狮,当然要紧跟互联网时代的步伐啦,于是我赶紧抽时间学习了一下小程序的开发,顺便把经验分享给大家. 对于申请账号以及安装开发工具等,大家可以看官网:https://mp.weixin.qq.com/debug/wxadoc/dev/. ●先上成果 .wxml代码: <view class='container'> <!-- 底部导航 --> <view class='bottom-nav'> <view class='t…
index.wxml代码 <view class="tab-left" > <view " bindtap="tab">tab-hd01</view> <view " bindtap="tab">tab-hd02</view> <view " bindtap="tab">tab-hd03</view> <vi…
.wxml <view class="select_box"> <scroll-view scroll-x="true" style="white-space:nowrap" class="nav_select"> <text class="select_item {{currentTab==index?'red':''}}" wx:for="{{likes}}&qu…
微信小程序滚动tab的实现 1.目的:为了解决滚动版本的tab,以及实现虹吸效果. 2.方案:自己动手写了一个Demo,用于测试实现如上的效果.其代码有做参考,在这里先声明.具体的参照如下:重庆大学二手书小程序. 3.效果: A)初始化效果:                 B)最终效果:                 4.实现:           项目结构如下:                                 WXML代码如下: <view class="Hv&quo…
小程序入口构造工具&二维码测试工具 本文将介绍我们小程序中隐藏的两个工具页面.原理虽不复杂,收益却实实在在,或许也能给诸君带来启发. 入口构造工具 痛点 PM&运营 投放链接 PM&运营每次投放新入口时,都需要找FE要页面链接.投放多少链接就要找FE多少次,一方面相互之间的沟通等待会耗掉不少时间,另一方面询问/回复过程会打断对方手头的工作,影响状态. 关键是大多时候这些链接只是需要改个渠道参数,并不涉及结构上的调整,完全可以由PM/运营自行修改. 然而要向所有PM&运营全面…
微信小程序<沈航二手书> 0x01. 利益相关者  利益相关者:是指与客户有一定利益关系的个人或组织群体,可能是客户内部的(如雇员),也可能是客户外部的(如供应商或压力群体). 根据相关利益者的定义,可将微信二手书小程序的相关利益者分类如下: 管理维护者 开发团队 供应商 想购买二手的学生和二手书回收商 供货商 想卖掉旧书的同学 竞争者 其他二手书商家 0x02. 市场需求调研  通过团队讨论最后选择以调查问卷的形势来进行需求调研:调查情况如下: 2.1 调查来源分析 调查问卷地址 微信小程序…
起源:最近小程序需要涉及到一些推广方面的功能,所以要写一个动态生成二维码用户进行下载分享,写完之后受益良多,特此来分享一下: 一.微信小程序动态生成保存二维码 wxml: <view class='second-code'> <view class="img-box"> <image bindtap="previewImg" mode="scaleToFill" src="{{imagePath}}&quo…