前文：
微信小程序开发极简入门（一）
样式wxss：
/**放在页面的wxss**/.scrollarea { flex: 1; overflow-y: hidden;}.idx_view { height: 200rpx; background-color: burlywood; margin: 20rpx 20rpx 20rpx 20rpx;}/**放在app.wxss**/view { background-color: cadetblue;}view text{ color: red;}样式没什么好讲的，就是css。
放在app.wxss就是全局样式。
.样式名：只有用class引用才生效。例如.idx_view{...}，只有class="idx_view"才起作用。
组件名：直接起作用。例如 view{...}，所有view组件都是这个样式。
组件的style属性会覆盖样式。
wxml：
<navigation-bar title="首页" back="{{false}}"></navigation-bar><scroll-view class="scroll-view" scroll-y type="list"> <view> <label>页面名称：</label><text style="color: orangered;">看字体颜色</text> </view></scroll-view>wxml：
<!--index.wxml--><navigation-bar title="首页" back="{{false}}"></navigation-bar><scroll-view class="scroll-view" scroll-y type="list"> <view class="idx_view"> <label>页面名称：</label><text style="color: orangered;">{{idxName}}</text> </view></scroll-view>js：
Page({ data: { idxName: "首页" }})注意：如果wxml组件的属性是boolean，例如checked="true"，合法。但假值必须写成checked="{{false}}"。
改数据，并且页面同步改，只能通过this.setData({key:value})的方式。
this.data.key=value不行。
双向绑定前面说的是单向绑定（数据可以影响页面），有时候我们还需要页面的更新能影响到数据&页面。例如：
input输入的内容展示在某个view中，同意协议的多选框勾选后，提交按钮变可用等。
做法有如下：
inputVal(e) { console.log(e) this.setData({ bindVal: e.detail.value }) }, data: { idxName: "首页", bindVal: "初始内容", twBindVal: "", ifAgree: false }<view class="idx_view"> <label>双向绑定内容A：</label><text>{{bindVal}}</text> <input type="text" placeholder="请输入内容" catch:input="inputVal" /> </view> <view class="idx_view"> <label>双向绑定内容B：</label><text>{{twBindVal}}</text> <input type="text" placeholder="请输入内容" model:value="{{twBindVal}}" /> </view> <view class="idx_view"> <checkbox id="ifAgreeCheckBox" model:checked="{{ifAgree}}" /><label for="ifAgreeCheckBox">是否同意</label> <button id="submitData" type="primary" disabled="{{!ifAgree}}">提交</button> </view>注意：<label>的for，绑定对应的组件（目前支持button、checkbox、radio、switch、input），代表点击此label时等同点击绑定的组件。
本文来自作者[若蓝]投稿，不代表酷展号立场，如若转载，请注明出处：https://iosku.vip/shenghe/2025sop04-12359.html
评论列表（4条）
我是酷展号的签约作者“若蓝”！
希望本篇文章《微信小程序样式（微信小程序开发极简入门二样式）》能对你有所帮助！
本站[酷展号]内容主要涵盖：国足,欧洲杯,世界杯,篮球,欧冠,亚冠,英超,足球,综合体育
本文概览：前文：微信小程序开发极简入门（一）样式wxss：/**放在页面的wxss**/.scrollarea { flex: 1; overflow-y: hidden;}.idx...