微信小程序 点击切换样式scroll-view实现代码实例


Posted in Javascript onOctober 11, 2019

这篇文章主要介绍了微信小程序 点击切换样式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
  })
 },

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 得到当前页面高度和宽度的两个函数
Feb 21 Javascript
onsubmit阻止form表单提交与onclick的相关操作
Sep 03 Javascript
myFocus slide3D v1.1.0 使用方法与下载
Jan 12 Javascript
File, FileReader 和 Ajax 文件上传实例分析(php)
Apr 27 Javascript
angularjs 处理多个异步请求方法汇总
Jan 06 Javascript
轻松学习jQuery插件EasyUI EasyUI创建RSS Feed阅读器
Nov 30 Javascript
利用JS实现数字增长
Jul 28 Javascript
详解vue添加删除元素的方法
Jun 30 Javascript
electron中使用bootstrap的示例代码
Nov 06 Javascript
详解几十行代码实现一个vue的状态管理
Jan 28 Javascript
微信小程序:数据存储、传值、取值详解
May 07 Javascript
解决vuex改变了state的值,但是页面没有更新的问题
Nov 12 Javascript
vue控制多行文字展开收起的实现示例
Oct 11 #Javascript
这15个Vue指令,让你的项目开发爽到爆
Oct 11 #Javascript
js脚本中执行java后台代码方法解析
Oct 11 #Javascript
基于js实现复制内容到操作系统粘贴板过程解析
Oct 11 #Javascript
ES6之Proxy的get方法详解
Oct 11 #Javascript
vue组件 keep-alive 和 transition 使用详解
Oct 11 #Javascript
jquery将json转为数据字典的实例代码
Oct 11 #jQuery
You might like
php获取url字符串截取路径的文件名和扩展名的函数
2010/01/22 PHP
PHP定时执行任务实现方法详解(Timer)
2015/07/30 PHP
php PDO实现的事务回滚示例
2017/03/23 PHP
Packer 3.0 JS压缩及混淆工具 下载
2007/05/03 Javascript
jQuery学习2 选择器的使用说明
2010/02/07 Javascript
js克隆对象、数组的常用方法介绍
2013/09/26 Javascript
javascript限制用户只能输汉字中文的方法
2014/11/20 Javascript
JS逆序遍历实现代码
2014/12/02 Javascript
jquery分析文本里url或邮件地址为真实链接的方法
2015/06/20 Javascript
javascript设置文本框光标的方法实例小结
2016/11/04 Javascript
HTML5 JS压缩图片并获取图片BASE64编码上传
2020/11/16 Javascript
JS对象创建的几种方式整理
2017/02/28 Javascript
借助node实战JSONP跨域实例
2017/03/30 Javascript
详解Vue 方法与事件处理器
2017/06/20 Javascript
浅谈ES6 模板字符串的具体使用方法
2017/11/07 Javascript
用node-webkit把web应用打包成桌面应用(windows环境)
2018/02/01 Javascript
nodejs图片处理工具gm用法小结
2018/12/12 NodeJs
浅入深出Vue之组件使用
2019/07/11 Javascript
基于JS实现数字动态变化显示效果附源码
2019/07/18 Javascript
Javascript实现鼠标点击冒泡特效
2019/12/24 Javascript
国内常用的js类库大全(CDN公共库)
2020/06/24 Javascript
jQuery 动态粒子效果示例代码
2020/07/07 jQuery
python教程之用py2exe将PY文件转成EXE文件
2014/06/12 Python
Python基于回溯法子集树模板解决旅行商问题(TSP)实例
2017/09/05 Python
DataFrame中去除指定列为空的行方法
2018/04/08 Python
使用EduBlock轻松学习Python编程
2018/10/08 Python
Python实现的银行系统模拟程序完整案例
2019/04/12 Python
python中@property和property函数常见使用方法示例
2019/10/21 Python
Python实现简单猜数字游戏
2021/02/03 Python
html5 Canvas绘制线条 closePath()实例代码
2012/05/10 HTML / CSS
Stefania Mode美国:奢华设计师和时尚服装
2018/01/07 全球购物
英国设计师泳装、沙滩装和比基尼在线精品店:Beach Cafe
2019/08/28 全球购物
Unix如何添加新的用户
2014/08/20 面试题
美国留学经济担保书
2014/05/20 职场文书
2014年学习部工作总结
2014/11/12 职场文书
Maven学习----Maven安装与环境变量配置教程
2021/06/29 Java/Android