Home Web Front-end JS Tutorial How to modify the view label background color in WeChat mini program

How to modify the view label background color in WeChat mini program

Jun 22, 2018 pm 03:24 PM
Revise WeChat applet button Click background color

This article mainly introduces the WeChat applet to implement the function of clicking the button to modify the background color of the view label, involving the WeChat applet event response and numerical calculation to realize the relevant operation skills of dynamically setting the view background color style. Friends in need can refer to the following

The example in this article describes the WeChat applet's function of changing the background color of the view label by clicking a button. Share it with everyone for your reference, the details are as follows:

Operation steps:

① Data binding view style background attribute value
② Set the background through a logical file Attribute initial value
③ Modify the background attribute value by clicking the button

Key code

index.wxml file:

<view style="background:{{viewBg}};color:white;height:100px;">我是view标签</view>
<button type="default" bindtap="changeBg">点击我修改view标签的背景颜色</button>
Copy after login

index.js file:

var num=0;
Page({
  data:{
    viewBg:&#39;green&#39;
  },
  changeBg(){
    num++;
    var result=num/2;
    if(num%2==0){      
      this.setData({
        viewBg:&#39;green&#39;
      })
    }else{
      this.setData({
        viewBg:&#39;blue&#39;
      })
    }
    console.log(num)
    console.log(result)
  }
})
Copy after login

In the code, the increment number of num is set, and then the remainder operation is performed to determine the odd and even number of num for each event response, and then the setting style="background: {{viewBg}};color:white;height:100px;"The effect of switching the background color value of viewBg between green and blue.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Detailed introduction to updating objects in mongoose

How to implement AOP in JavaScript

How to deploy https using nginx node

There is a detailed introduction to updating objects in mongoose

In JS Detailed introduction to setTimeout in the function

The above is the detailed content of How to modify the view label background color in WeChat mini program. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to change the personal name in the group on DingTalk_How to modify the personal name in the group on DingTalk How to change the personal name in the group on DingTalk_How to modify the personal name in the group on DingTalk Mar 29, 2024 pm 08:41 PM

1. First open DingTalk. 2. Open the group chat and click the three dots in the upper right corner. 3. Find my nickname in this group. 4. Click to enter to modify and save.

How to set the background color in editplus-How to set the background color in editplus How to set the background color in editplus-How to set the background color in editplus Mar 04, 2024 pm 07:00 PM

Friends, do you know how to set the background color in editplus? Today I will explain how to set the background color in editplus. If you are interested, come and take a look with me. I hope it can help you. Step 1: First open editplus, click Tools above, as shown in the picture: Step 2: In the tool menu, click preferences, as shown in the picture: Step 3: In the preferences page, click colors on the left, as shown in the picture: Chapter 3 Step 4: In the background position, select a color as needed, as shown in the figure:

Can Douyin Blue V change its name? What are the steps to change the name of corporate Douyin Blue V account? Can Douyin Blue V change its name? What are the steps to change the name of corporate Douyin Blue V account? Mar 22, 2024 pm 12:51 PM

Douyin Blue V certification is the official certification of a company or brand on the Douyin platform, which helps enhance brand image and credibility. With the adjustment of corporate development strategy or the update of brand image, the company may want to change the name of Douyin Blue V certification. So, can Douyin Blue V change its name? The answer is yes. This article will introduce in detail the steps to modify the name of the enterprise Douyin Blue V account. 1. Can Douyin Blue V change its name? You can change the name of Douyin Blue V account. According to Douyin’s official regulations, corporate Blue V certified accounts can apply to change their account names after meeting certain conditions. Generally speaking, enterprises need to provide relevant supporting materials, such as business licenses, organization code certificates, etc., to prove the legality and necessity of changing the name. 2. What are the steps to modify the name of corporate Douyin Blue V account?

Why won't my laptop start up after pressing the power button? Why won't my laptop start up after pressing the power button? Mar 10, 2024 am 09:31 AM

There could be several reasons why your Windows laptop won't boot. Memory failure, dead battery, faulty power button, or hardware issues are all common causes. Here are some solutions to help you resolve this issue. Laptop won't turn on after pressing the power button If your Windows laptop still won't turn on after pressing the power button, here are some steps you can take to resolve the issue: Is your laptop fully charged? Perform a hard reset to clean your laptop Reseat the memory Transparent CMOS type battery Take your laptop for repair. 1] Is your laptop fully charged? The first thing to do is to check if your laptop is fully charged. Laptop won't start if battery is drained

What does iPhone 16 look like? What changes are there in iPhone 16? What does iPhone 16 look like? What changes are there in iPhone 16? Apr 07, 2024 pm 05:10 PM

After the release of the iPhone 15 series, there have been constant revelations about the appearance and configuration of Apple’s new iPhone 16. What does iPhone 16 look like? Is there any improvement in iPhone 16? Recently, an overseas blogger showed off the design of the iPhone 16 series. The overall design is basically the same as the iPhone 15 series. As you can see from the picture, the entire iPhone 16 series is equipped with a new "shoot" button as standard, allowing users to take photos more conveniently. In addition, other design details are still unknown. The message shows that this new button will be used to shoot videos and is located below the power button. Previous news has mentioned that it may be a capacitive solid-state button, but recent reports indicate that it should still be a

Win10 sleep time modification tips revealed Win10 sleep time modification tips revealed Mar 08, 2024 pm 06:39 PM

Win10 Sleep Time Modification Tips Revealed As one of the currently widely used operating systems, Windows 10 has a sleep function to help users save power and protect the screen when not using the computer. However, sometimes the default sleep time does not meet the needs of users, so it is particularly important to know how to modify the Win10 sleep time. This article will reveal the tips for modifying the sleep time of Win10, allowing you to easily customize the system’s sleep settings. 1. Modify Win10 sleep time through “Settings” First, the simplest fix

How to modify the address location of published products on Xianyu How to modify the address location of published products on Xianyu Mar 28, 2024 pm 03:36 PM

When publishing products on the Xianyu platform, users can customize the geographical location information of the product according to the actual situation, so that potential buyers can more accurately grasp the specific location of the product. Once the product is successfully put on the shelves, there is no need to worry if the seller's location changes. The Xianyu platform provides a flexible and convenient modification function. So when we want to modify the address of a published product, how do we modify it? This tutorial guide will provide you with a detailed step-by-step guide. I hope it can help. Everyone! How to modify the release product address in Xianyu? 1. Open Xianyu, click on what I published, select the product, and click Edit. 2. Click the positioning icon and select the address you want to set.

What is the name of Xianyu WeChat applet? What is the name of Xianyu WeChat applet? Feb 27, 2024 pm 01:11 PM

The official WeChat mini program of Xianyu has been quietly launched. It provides users with a convenient platform that allows you to easily publish and trade idle items. In the mini program, you can communicate with buyers or sellers via private messages, view personal information and orders, and search for the items you want. So what exactly is Xianyu called in the WeChat mini program? This tutorial guide will introduce it to you in detail. Users who want to know, please follow this article and continue reading! What is the name of the Xianyu WeChat applet? Answer: Xianyu, idle transactions, second-hand sales, valuations and recycling. 1. In the mini program, you can post idle messages, communicate with buyers/sellers via private messages, view personal information and orders, search for specified items, etc.; 2. On the mini program page, there are homepage, nearby, post idle, messages, and mine. 5 functions; 3.

See all articles