微信小程序 点击切换样式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 清除输入框中的数据
Apr 13 Javascript
Javascript load Page,load css,load js实现代码
Mar 31 Javascript
统计jQuery中各字符串出现次数的工具
May 03 Javascript
javascript判断office版本示例
Apr 11 Javascript
js统计录入文本框中字符的个数并加以限制不超过多少
May 23 Javascript
jquery trigger伪造a标签的click事件取代window.open方法
Jun 23 Javascript
Vue数据驱动模拟实现4
Jan 12 Javascript
原生js实现对Ajax的封装(仿jquery)
Jan 22 Javascript
Boostrap栅格系统与自己额外定义的媒体查询的冲突问题
Feb 19 Javascript
AngularJS中scope的绑定策略实例分析
Oct 30 Javascript
详解使用React.memo()来优化函数组件的性能
Mar 19 Javascript
详解Vue项目中实现锚点定位
Apr 24 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函数
2011/05/31 PHP
PHP url 加密解密函数代码
2011/08/26 PHP
PHP基本语法总结
2014/09/06 PHP
PHP实现二维数组(或多维数组)转换成一维数组的常见方法总结
2019/12/04 PHP
用javascript实现页面打印的三种方法
2007/03/05 Javascript
ie和firefox不兼容的解决方法集合
2009/04/28 Javascript
Struts2的s:radio标签使用及用jquery添加change事件
2013/04/08 Javascript
Javascript中的异步编程规范Promises/A详细介绍
2014/06/06 Javascript
javascript匿名函数实例分析
2014/11/18 Javascript
简单谈谈javascript代码复用模式
2015/01/28 Javascript
使用jQuery mobile库检测url绝对地址和相对地址的方法
2015/12/04 Javascript
jQuery实现鼠标滚动图片延迟加载效果附源码下载
2016/06/28 Javascript
用file标签实现多图文件上传预览
2017/02/14 Javascript
javascript实现多张图片左右无缝滚动效果
2017/03/22 Javascript
微信小程序 wx.request方法的异步封装实例详解
2017/05/18 Javascript
初识 Vue.js 中的 *.Vue文件
2017/11/22 Javascript
vue 源码解析之虚拟Dom-render
2019/08/26 Javascript
VSCode Vue开发推荐插件和VSCode快捷键(小结)
2020/08/08 Javascript
python有证书的加密解密实现方法
2014/11/19 Python
Python计算回文数的方法
2015/03/11 Python
Python赋值语句后逗号的作用分析
2015/06/08 Python
Python django实现简单的邮件系统发送邮件功能
2017/07/14 Python
python将每个单词按空格分开并保存到文件中
2018/03/19 Python
Python 获取主机ip与hostname的方法
2018/12/17 Python
Pytorch实现将模型的所有参数的梯度清0
2020/06/24 Python
python 绘制国旗的示例
2020/09/27 Python
CSS3的transition和animation的用法实例介绍
2014/08/20 HTML / CSS
智能钱包:Ekster
2019/11/21 全球购物
Yankee Candle官网:美国最畅销蜡烛品牌之一
2020/01/05 全球购物
策划总监岗位职责
2014/02/16 职场文书
小学教师师德师风演讲稿
2014/08/22 职场文书
教师批评与自我批评范文
2014/10/15 职场文书
开会通知
2015/04/20 职场文书
2016国庆节活动宣传语
2015/11/25 职场文书
浅谈Python协程asyncio
2021/06/20 Python
Python之基础函数案例详解
2021/08/30 Python