微信小程序——点击切换样式scroll-view
时间:2019-10-09
本文章向大家介绍微信小程序——点击切换样式scroll-view,主要包括微信小程序——点击切换样式scroll-view使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
scroll-view滚动视图点击切换样式
*.wxml
<view class="content"> <view class="navbg"> <view class="nav"> <scroll-view class="scroll-view_H" scroll-x="true"> <view class="scroll-view_H"> <view><view class="{{flag==0? 'select':'normal'}}" id="0" bindtap="switchNav">推荐</view></view> <view><view class="{{flag==1? 'select':'normal'}}" id="1" bindtap="switchNav">热点</view></view> <view><view class="{{flag==2? 'select':'normal'}}" id="2" bindtap="switchNav">北京</view></view> <view><view class="{{flag==3? 'select':'normal'}}" id="3" bindtap="switchNav">社会</view></view> <view><view class="{{flag==4? 'select':'normal'}}" id="4" bindtap="switchNav">娱乐</view></view> <view><view class="{{flag==5? 'select':'normal'}}" id="5" bindtap="switchNav">问答</view></view> <view><view class="{{flag==6? 'select':'normal'}}" id="6" bindtap="switchNav">图片</view></view> <view><view class="{{flag==7? 'select':'normal'}}" id="7" bindtap="switchNav">科技</view></view> <view><view class="{{flag==8? 'select':'normal'}}" id="8" bindtap="switchNav">汽车</view></view> <view><view class="{{flag==9? 'select':'normal'}}" id="9" bindtap="switchNav">体育</view></view> </view> </scroll-view> </view> <view class="add">+</view> </view> </view>
*.wxss
.navbg{ background-color: #F6F5F3; height: 36px; color: #000000; display: flex; flex-direction: row; align-items: center; } .nav{ width: 85%; height: 36px; } .add{ width: 15%; height: 50px; line-height: 50px; text-align: right; margin-right: 10px; font-size: 50px; } .scroll-view_H{ height: 40px; display: flex; flex-direction: row; margin-left: 5px; } .normal{ width: 40px; height: 40px; line-height: 40px; padding-left: 5px; padding-right: 5px; font-size: 14px; } .select{ width: 40px; height: 40px; line-height: 40px; padding-left: 5px; padding-right: 5px; font-size: 14px; font-weight: bold; color: skyblue; }
*.js
data: { flag: 0, }, switchNav: function(e){ console.log(e.currentTarget.id); this.setData({ flag: e.currentTarget.id }) },
原文地址:https://www.cnblogs.com/en1302coling/p/11641797.html
- 性能优化总结(四):预加载的设计
- 在Expression Blend中使用XAML建立3D应用程序
- 使用 Asp.net Future May 2007 开发Silverlight应用
- Rafy 领域实体框架设计 - 重构 ORM 中的 Sql 生成
- RePractise前端篇: 前端演进史
- 性能优化总结(三):聚合SQL在GIX4中的应用
- ASP.NET AJAX 控件开发基础
- 听我说说我的博客: 月访问量过万的个人IT博客的技术史
- TransactionScope和Enterprise Libray 3.0 Data Access Application Block
- 《Python Web开发 - 测试驱动方法》阅后感
- 微信小程序分享——会话服务器和业务服务器合并
- 微信官方开源UI库-WeUI
- ViewFlipper实现多页面切换
- Ubuntu & Fedora Mono 2.8 安装脚本
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Geant4--root和csv文件存储
- 爬虫模拟登录破解无原图滑动验证码
- Flutter基础widgets教程-TabBarView篇
- python + selenium 爬虫模拟登录破解无原图滑动验证码
- python 轻量级定时框架apscheduler,周中定时给自己发送邮件。
- python 舆情分析 nlp主题分析 (1) 待续
- Flutter基础widgets教程-Text篇
- python 舆情分析 nlp主题分析 (2)-结合snownlp与jieba库,提高分词与情感判断 待续
- No qualifying bean of type 'com.pjh.service.Imp.serviceImp' available和Exception in thread "main" jav
- python音频文件中pcm格式提取
- Spring系列之事务的控制 注解实现+xml实现+事务的隔离等级
- Leetcode刷题 237. 删除链表中的节点 两行代码实现
- python提取视频第一帧图片
- Leetcode刷题 206. 反转链表 递归迭代两种方法实现
- airtest本地连接和远程连接