学习小程序第二天

学习小程序第二天

简单的使用js绑定事件

index.wxml

 <view class="navs">
     <text class="active">精选</text>
     <text>蔬菜</text>
     <text>内衣</text>
     <text>母婴</text>
     <text>儿童</text>
     <text>手机</text>
 </view>
 <!-- 页面的数据绑定 -->
 <view>{{ msg }}</view>
 ​
 <!-- tap就是点击事件没有click -->
 <button type="primary" bind:tap="changeMsg">点击修改</button>

index.js

 Page({
   // 页面数据的初始化，data是一个对象不是一个函数
   data:{
     msg:"Hello World"
   },
 ​
   // 事件处理函数和data同级
   changeMsg(){
     // 1. 更新data的数据
     // 2. 更新视图
     this.setData({
       msg:'乾坤未定，你我皆是黑马'
     })
   }
 })
 })

index.wxcss

 ​
 .navs{
   display: flex;
   justify-content: space-evenly;
   align-items: center;
   height: 40px;
   font-size: 14px;
 }
 ​
 .active{
   color: #00b26a;
   border-bottom: solid #00b26a;
 }

• 点击前

• 点击后