微信小程序 点击切换样式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 相关文章推荐
js刷新框架子页面的七种方法代码
Nov 20 Javascript
高效的表格行背景隔行变色及选定高亮的JS代码
Dec 04 Javascript
使用js实现雪花飘落效果
Aug 26 Javascript
JQuery实现绚丽的横向下拉菜单
Dec 19 Javascript
jQuery中prop()方法用法实例
Jan 05 Javascript
jquery简单实现外部链接用新窗口打开的方法
May 30 Javascript
JQuery标签页效果实例详解
Dec 24 Javascript
js滑动提示效果代码分享
Mar 10 Javascript
easyui tree带checkbox实现单选的简单实例
Nov 07 Javascript
Angular.js中控制器之间的传值详解
Apr 24 Javascript
JavaScript的六种继承方式(推荐)
Jun 26 Javascript
Vue实现input宽度随文字长度自适应操作
Jul 29 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地址
2008/12/20 PHP
php和jquery实现地图区域数据统计展示数据示例
2014/02/12 PHP
php cookie名使用点号(句号)会被转换
2014/10/23 PHP
分享php多功能图片处理类
2016/05/15 PHP
PHP基于单例模式编写PDO类的方法
2016/09/13 PHP
xtree.js 代码
2007/03/13 Javascript
jqueyr判断checkbox组的选中(示例代码)
2013/11/08 Javascript
jQuery源码分析之jQuery.fn.each与jQuery.each用法
2015/01/23 Javascript
jQuery动画效果相关方法实例分析
2015/12/31 Javascript
基于JS实现省市联动效果代码分享
2016/06/06 Javascript
JS HTML5拖拽上传图片预览
2016/07/18 Javascript
详解vue.js的devtools安装
2017/05/26 Javascript
基于原生js运动方式关键点的总结(推荐)
2017/10/01 Javascript
微信小程序获取手机网络状态的方法【附源码下载】
2017/12/08 Javascript
React为 Vue 引入容器组件和展示组件的教程详解
2018/05/03 Javascript
jQuery点击页面其他部分隐藏下拉菜单功能
2018/11/27 jQuery
vue组件开发之tab切换组件使用详解
2020/08/21 Javascript
[51:30]OG vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.26
2018/08/30 DOTA
git使用.gitignore设置不生效或不起作用问题的解决方法
2017/06/01 Python
浅谈python3.x pool.map()方法的实质
2019/01/16 Python
Python创建字典的八种方式
2019/02/27 Python
Django框架会话技术实例分析【Cookie与Session】
2019/05/24 Python
使用Python检测文章抄袭及去重算法原理解析
2019/06/14 Python
Python Numpy中数据的常用保存与读取方法
2020/04/01 Python
Python爬虫基于lxml解决数据编码乱码问题
2020/07/31 Python
浅谈CSS3动画的回调处理
2016/07/21 HTML / CSS
html5指南-4.使用Geolocation实现定位功能
2013/01/07 HTML / CSS
python re模块和正则表达式
2021/03/24 Python
客服服务心得体会
2013/12/30 职场文书
艺术学院毕业生自荐信
2014/07/05 职场文书
主题班会开场白
2015/06/01 职场文书
《我们的民族小学》教学反思
2016/02/19 职场文书
2016年小学教师师德承诺书
2016/03/25 职场文书
营销策划分析:怎么策划才能更好销量产品?
2019/09/04 职场文书
Android在Sqlite3中的应用及多线程使用数据库的建议
2022/04/24 Java/Android
win11开机发生死循环重启怎么办?win11开机发生死循环重启解决方法
2022/08/05 数码科技