微信小程序 点击切换样式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 相关文章推荐
如何用javascript判断录入的日期是否合法
Jan 08 Javascript
div层的移动及性能优化
Nov 16 Javascript
jQuery动态修改超链接地址的方法
Feb 13 Javascript
jQuery插件实现图片轮播特效
Jun 16 Javascript
Bootstrap 源代码分析(未完待续)
Aug 17 Javascript
bootstrap日历插件datetimepicker使用方法
Dec 14 Javascript
jQuery使用unlock.js插件实现滑动解锁
Apr 04 jQuery
前端构建工具之gulp的配置与搭建详解
Jun 12 Javascript
详解React-Router中Url参数改变页面不刷新的解决办法
May 08 Javascript
写gulp遇到的ES6问题详解
Dec 03 Javascript
使用vuepress搭建静态博客的示例代码
Feb 14 Javascript
JS前端宏任务微任务及Event Loop使用详解
Jul 23 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
Oracle 常见问题解答
2006/10/09 PHP
解析如何去掉CodeIgniter URL中的index.php
2013/06/25 PHP
php使用GeoIP库实例
2014/06/27 PHP
9个经典的PHP代码片段分享
2014/12/18 PHP
修复ShopNC使用QQ 互联时提示100010 错误
2015/11/08 PHP
PHP编程开发怎么提高编程效率 提高PHP编程技术
2015/11/09 PHP
dess中一个简单的多路委托的实现
2010/07/20 Javascript
基于Jquery的$.cookie()实现跨越页面tabs导航实现代码
2011/03/03 Javascript
js动态添加的DIV中的onclick事件简单实例
2016/07/25 Javascript
window.open不被拦截的简单实现代码(推荐)
2016/08/04 Javascript
js实现淡入淡出轮播切换功能
2017/01/13 Javascript
扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
2017/02/21 Javascript
React学习笔记之事件处理(二)
2017/07/02 Javascript
Vue2.0实现将页面中表格数据导出excel的实例
2017/08/09 Javascript
JS库之Three.js 简易入门教程(详解之一)
2017/09/13 Javascript
每个 JavaScript 工程师都应懂的33个概念
2018/10/22 Javascript
微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例
2018/12/20 Javascript
微信小程序实现星级评价效果
2018/12/28 Javascript
JavaScript中.min.js和.js文件的区别讲解
2019/02/13 Javascript
vue双向绑定及观察者模式详解
2019/03/19 Javascript
浅谈Vue的响应式原理
2019/05/30 Javascript
React 实现车牌键盘的示例代码
2019/12/20 Javascript
pycharm 使用心得(八)如何调用另一文件中的函数
2014/06/06 Python
Python中格式化format()方法详解
2017/04/01 Python
python中dict字典的查询键值对 遍历 排序 创建 访问 更新 删除基础操作方法
2018/09/13 Python
Python 获取windows桌面路径的5种方法小结
2019/07/15 Python
Python操作MongoDb数据库流程详解
2020/03/05 Python
PIP和conda 更换国内安装源的方法步骤
2020/09/21 Python
HTML5 Canvas draw方法制作动画效果示例
2013/07/11 HTML / CSS
微信小程序“圣诞帽”的实现思路详解
2017/12/28 HTML / CSS
函授教育个人学习的自我评价
2013/12/31 职场文书
校园文化标语
2014/06/18 职场文书
国庆节促销广告语2014
2014/09/19 职场文书
浅谈vue2的$refs在vue3组合式API中的替代方法
2021/04/18 Vue.js
golang 实现两个结构体复制字段
2021/04/28 Golang
Python 避免字典和元组的多重嵌套问题
2022/07/15 Python