微信小程序 点击切换样式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圆角插件
Oct 26 Javascript
js关闭模态窗口刷新父页面或跳转页面
Dec 13 Javascript
一个JavaScript操作元素定位元素的实例
Oct 29 Javascript
jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果
Oct 28 Javascript
ClearTimeout消除闪动实例代码
Feb 29 Javascript
全面解析Bootstrap中tooltip、popover的使用方法
Jun 13 Javascript
jQuery插件HighCharts绘制2D带Label的折线图效果示例【附demo源码下载】
Mar 08 Javascript
轻松玩转BootstrapTable(后端使用SpringMVC+Hibernate)
Sep 06 Javascript
JavaScript面向对象编程小游戏---贪吃蛇代码实例
May 15 Javascript
javascript中的数据类型检测方法详解
Aug 07 Javascript
vue离开当前页面触发的函数代码
Sep 01 Javascript
详解JavaScript中的数据类型,以及检测数据类型的方法
Sep 17 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类
2008/04/09 PHP
php提交表单时判断 if($_POST[submit])与 if(isset($_POST[submit])) 的区别
2011/02/08 PHP
destoon设置自定义搜索的方法
2014/06/21 PHP
php中获取主机名、协议及IP地址的方法
2014/11/18 PHP
PHP实现的进度条效果详解
2016/05/03 PHP
Yii2针对游客、用户防范规则和限制的解决方法分析
2016/10/08 PHP
详解Laravel5.6 Passport实现Api接口认证
2018/07/27 PHP
PHP的JSON封装、转变及输出操作示例
2019/09/27 PHP
PHP pthreads v3使用中的一些坑和注意点分析
2020/02/21 PHP
jquery调用asp.net 页面后台的实现代码
2011/04/27 Javascript
select标签模拟/美化方法采用JS外挂式插件
2013/04/01 Javascript
js获取input长度并根据页面宽度设置其大小及居中对齐
2014/08/22 Javascript
javascript实现图片上传前台页面
2015/08/18 Javascript
node模块机制与异步处理详解
2016/03/13 Javascript
基于Bootstrap实现tab标签切换效果
2020/04/15 Javascript
AngularJS的ng Http Request与response格式转换方法
2016/11/07 Javascript
JavaScript之创意时钟项目(实例讲解)
2017/10/23 Javascript
vue 路由嵌套高亮问题的解决方法
2018/05/17 Javascript
Vue-cli3项目配置Vue.config.js实战记录
2018/07/29 Javascript
Python中isnumeric()方法的使用简介
2015/05/19 Python
Python使用微信SDK实现的微信支付功能示例
2017/06/30 Python
使用Python画股票的K线图的方法步骤
2019/06/28 Python
python中多个装饰器的调用顺序详解
2019/07/16 Python
Python实现一个带权无回置随机抽选函数的方法
2019/07/24 Python
termux中matplotlib无法显示中文问题的解决方法
2021/01/11 Python
Python图像处理之膨胀与腐蚀的操作
2021/02/07 Python
HTML5 画布canvas使用方法
2016/03/18 HTML / CSS
什么是SQL Server的确定性函数和不确定性函数
2016/08/04 面试题
巧克力蛋糕店创业计划书
2014/01/14 职场文书
大三学生做职业规划:给未来找个方向
2014/02/24 职场文书
《蓝色的树叶》教学反思
2014/02/24 职场文书
医学生毕业自我鉴定
2014/03/26 职场文书
幼师求职自荐信
2014/05/31 职场文书
社区领导班子四风问题原因分析及整改措施
2014/09/28 职场文书
关于golang高并发的实现与注意事项说明
2021/05/08 Golang
Redis主从配置和底层实现原理解析(实战记录)
2021/06/30 Redis