微信小程式 修改點選樣式
我用彈性盒子寫四個< view>< /view>.
要求.第一個< view>預設顯示已點選狀態
解決方法就是給第一個view單獨加一個叫“active”的類名,加個樣式,其他三個不加就行了。
.active{
background-color: #eaeaea;
color:purple;
}
上一下程式碼:
< view class=’choose flex’>
< view class=”flex flex-center choose-item active” bindtap=’checked’ data-app=”first” style=’background-color:{{ first }}; color:{{ firstcolor }}’>
< view class=’choose-icon’>< image src=” style=’width:100%;height:100 image>< /view>
< view class=’choose-text’>001< /view>
< /view>
< view class=”flex flex-center choose-item” bindtap=’checked’ data-app=”second” style=’background-color:{{ second }}; color:{{ secondcolor }}’>
< view class=’choose-icon’>< image src=” style=’width:100%;height:100%;’>< /image>< /view>
< view class=’choose-text’>002< /view>
< /view>
< view class=”flex flex-center choose-item” bindtap=’checked’ data-app=”third” style=’background-color:{{ third }}; color:{{ thirdcolor }}’>
< view class=’choose-icon’>< image src=” style=’width:100%;height:100%;’>< /image>< /view>
< view class=’choose-text’>003< /view>
< /view>
< view class=”flex flex-center choose-item” bindtap=’checked’ data-app=”fourth” style=’background-color:{{ fourth }}; color:{{ fourthcolor }}’>
< view class=’choose-icon’>< image src=” style=’width:100%;height:100%;’>< /image>< /view>
< view class=’choose-text’>004< /view>
< /view>
< /view>
給每個view繫結一個bindtap事件,再自定義一個data-app屬性,然後再樣式上進行資料繫結,在JS裡用setData來改變樣式。微信裡沒有DOM操作。。。
JS程式碼:
data: {
first:”,
firstcolor:”,
second:”,
secondcolor:”,
third:”,
thirdcolor:”,
fourth:”,
fourthcolor:”
},
checked:function(e) {
// 獲取到HTML頁面上定義的data-app的值
var app=e.currentTarget.dataset.app;
if(app==”first”){
this.setData({
first:’#eaeaea’,
firstcolor:’purple’,
second:’#fafafa’,
secondcolor:’#000’,
third:’#fafafa’,
thirdcolor:’#000’,
fourth:’#fafafa’,
fourthcolor:’#000’
})
};
if(app==”second”){
this.setData({
first: ‘#fafafa’,
firstcolor:’#000’,
second: ‘#eaeaea’,
secondcolor: ‘purple’,
third: ‘#fafafa’,
thirdcolor: ‘#000’,
fourth: ‘#fafafa’,
fourthcolor: ‘#000’
})
};
if(app==’third’){
this.setData({
first: ‘#fafafa’,
firstcolor: ‘#000’,
second: ‘#fafafa’,
secondcolor: ‘#000’,
third: ‘#eaeaea’,
thirdcolor: ‘purple’,
fourth: ‘#fafafa’,
fourthcolor: ‘#000’
})
};
if(app==’fourth’){
this.setData({
first: ‘#fafafa’,
firstcolor: ‘#000’,
second: ‘#fafafa’,
secondcolor: ‘#000’,
third: ‘#fafafa’,
thirdcolor: ‘#000’,
fourth: ‘#eaeaea’,
fourthcolor: ‘purple’
})
}
}
相關推薦
微信小程式 修改點選樣式
我用彈性盒子寫四個< view>< /view>. 要求.第一個< view>預設顯示已點選狀態 解決方法就是給第一個view單獨加一個叫“active”的類名,加個樣式,其他三個不加就行了。 .active{
微信小程式:點選圖片進行預覽
微信小程式:點選圖片進行預覽 在開發需求中,經常有類似與九宮格的圖片展示,當點選圖片時進行圖片的預覽,如果多圖的情況還可以左右滑動。 小程式中具體實現效果如下: WXML <view class='imgList'> &nbs
微信小程式圖片點選放大
WXML <view class='imgList'> <view class='imgList-li' wx:for='{{imgArr}}'> <image class='img' src='{{i
微信小程式:點選圖片預覽
做微信小程式的時候使用的圖片大小不盡相同,為了讓使用者能夠瀏覽原圖,就需要給圖片新增點選預覽的功能,下面我詳細介紹一下實現步驟, 首先介紹微信小程式文件中的使用教程: 微信小程式官方文件:https://developers.weixin.qq.com/miniprogram/dev/
微信小程式例子——點選文字實現頁面跳轉
1、效果展示 .w 2、關鍵程式碼 index.js檔案 Page({ data:{ // text:"這是一個頁面" }, onLoad:function(options){
微信小程式radio點選框,再次點選取消
<view class="page"> <view class="page__hd"> <text class="page__title">radio</text> <text class="page__d
微信小程式:點選商品+,出現數量和-
問題描述: 商品列表中只有“+”,點選之後出現“-1+”,可以對數量進行增減, 效果 .wxml <view class="add-box">
微信小程式 實現點選按鈕選擇圖片後顯示圖片並且可以預覽該圖片
wxml: js: data裡 要寫圖片這個變數。 點選選擇圖片 預覽圖片 給 image加事件,利用e.target.dataset.src 獲取當前圖片地址,賦值給wx.previewImage的current變數。
微信小程式改變單選多選按鈕樣式
/* 重寫 checkbox 樣式 */ /* 未選中的 背景樣式 */ checkbox .wx-checkbox-input { border-radius: 50%; /* 圓角 */ width: 40rpx; /* 背景的寬 */
微信小程式--修改checkbox和radio的樣式
在微信小程式裡面,有時候為了配合整個專案的風格,checkbox和radio的樣式會有些不同。1. 修改checkbox樣式.wxml<checkbox-groupclass='pull-left'bindchange="checkboxChange"><l
微信小程序-修改單選框和復選框大小的方法
整體 復選框 col 限制 微信 for 明顯 單選框 模糊 方法有兩種: 一:采用css的zoom屬性 zoom縮放會將元素保持在左上角,並且會有毛邊,可能會稍稍改變元素原來的形狀。 二:采用css3的transform:scale屬性 zoom縮放會將元素保持在中間
微信小程式注意點與快捷鍵
注意點1. 微信對小程式的要求是整體大小不能超過1MB。 2. .json 是配置檔案,其內容必須符合JSON格式,所以檔案內部不允許有註釋。 3. app.json 是全域性配置檔案,微信小程式中的每一個頁面的【路徑+頁面名】都需要寫在 app.json 的 pages 中,且 pages 中的第一個頁面是
微信小程式 自定義 swiper 樣式
本文出自: http://blog.csdn.net/wyk304443164 實現功能如下: 僅重寫了swiper的樣式,so fucking easy! wx-swiper-item { width: 90% !important; mar
微信小程式---排序按鈕的樣式編寫
完成的效果如下: 看起來好像很簡單但是也是幾經波折,所以特意記錄下來 非微信小程式的解決方案 如果不是微信小程式,而且HTML程式碼,還是比較好實現的,美工提供了三套圖示 通過background-image引入圖示,然後通過更換class實現點選圖示更換效果,這裡不
微信小程式實現點贊、取消點贊功能
最近接觸到小程式,發現很有意思,在專案中遇到了一點小問題,就是點贊+取消點贊有些衝突,還有就是多項的點選,話不多說咱們直接上程式碼! 效果圖 wxml ? 1
微信小程式—修改日期
最近專案開發在做微信小程式專案,記錄一下開發過程中用到的一些小東西,實現的是一個點選增加減小日期的小東西, 貼一下效果圖 大概就是這個效果,可以點選減小日期,點選增大日期,也可以直接選擇日期,相應的判斷日期大小給出相應的提示。 貼一下程式碼 <!-- wxml -->
微信小程式——評論點贊功能
實現的最終效果圖 1.點贊功能 前端頁面結構 1 <view class='talk-item-zan'> 2 <view bindtap='favorclick' data-id='{{item.id}}' data-islike="{{
微信小程式 修改資料,並動態渲染頁面;修改陣列;
一、修改資料,並在頁面動態渲染 this.setData({ txt: '12112' }) 二、修改陣列 var rotateClassItem = 'rotateClass['+ index + ']'; t
微信小程式去除Button預設樣式
在小程式開發過程中,使用率蠻高的元件button,因為經常要去除預設樣式,然後再自定義樣式,所以經常寫,自己也總結分享一下簡單的實現步驟。 (一)實現效果1、實現前(預設樣式): 2、實現後(去除預設邊框和背景色): (二)實現過程1、使用::after 偽類選擇器,因為button的邊框樣式是通過
微信小程式修改資料不重新整理頁面更新資料
先將資料儲存到本地快取,如下: wx.setStorageSync('caseid', this.data.id) wx.setStorageSync('newmsg', data) //data是一個物件 在需要修改的頁面獲取本地快取的資料,如下: var newmsg = wx.