提供微商城·微分销·小程序开店需求
5分钟开通你的微信商城店铺!2018-09-14 作者:秩名
实现非常简单,通过一个简单的判断当前data中的选中值,点击按钮时更新data值,重新渲染页面。
index.wxml文件
<view class="switch-type"> <view class="btn {{currentSelectTripType == 'pinche' ? 'active' : ''}}" bindtap='selectedPinche' data-id='pinche'>拼车</view> <view class="btn {{currentSelectTripType == 'baoche' ? 'active' : ''}}" bindtap='selectedBaoche' data-id='baoche'>包车</view> </view>
index.js文件
Page({ data: {~~~~ currentSelectTripType: 'pinche', }, // 更新data 切换选中状态 selectedPinche: function (e) { this.setData({ currentSelectTripType: e.currentTarget.dataset.id }) }, selectedBaoche: function(e) { this.setData({ currentSelectTripType: e.currentTarget.dataset.id }) }, })
附上一个简单的样式
index.wxss
.switch-type { display: flex; } .switch-type .btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; } .switch-type .btn:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; } .switch-type .btn { background: #dfdfdf; padding: 10rpx 40rpx; } .switch-type .btn.active { border: 2rpx solid #007bff; background: #fff; }
推荐文章
是不是很多微信用户在使用微信小程序时会出现这样的问题,比如,突然中断的情况,其实这就是微信小程序闪退。微信小程...
日前,百度陆续开放了多个智能小程序流量入口,具体包括以下三类: 第一类是中心化入口。 用户除了在“我的“菜单可以...
微信应用的一个很大的优势就在于使用过程中是不需要进行注册和显式登录的,大部分问题基本上可以一键解决。但是在授权...
见到 wx.request 的第一眼,就让我想起了 $.ajax 这东西,使用起来确实有很多不方便,不能忍,幸好小程序是支持ES6语法的,所...
目前最好最受欢迎的收银系统品牌有HiShop友数、商米等,每个品牌都有各自的特点和主要发展的行业,下面小编就为大家来介...
餐饮行业是国内规模万亿级别的市场,如今市面上的餐饮品牌门店数不胜数,在如今这个互联网时代,许许多多餐饮门店都开...
连锁超市在选择收银系统的时候,首先会考虑到收银系统的操作便捷,能够给收银员的工作提升效率的同时,避免出现错误,...
超市收银系统百科 超市收银系统是零售业中用于处理销售交易的关键技术,它不仅提高了结账效率,还增强了顾客的购物体...
酒吧收银系统百科 1. 酒吧收银系统概述 酒吧收银系统是专为酒吧、夜店等娱乐场所设计的一套集成化管理软件,它能够实现...
生鲜超市收银系统十大品牌有哪些呢?下面小编就为大家来讲解一下各收银系统的特...