微信小程序--动态更换背景、图片&&点击不同view 该view显示阴影

81 阅读 0 评论 54 点赞

我是靠谱客的博主勤劳菠萝，最近开发中收集的这篇文章主要介绍微信小程序--动态更换背景、图片&&点击不同view 该view显示阴影，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

效果图

在这里插入图片描述

demo代码

wxml

<cu-custom bgColor="bg-gradual-orange" isCustom="{{true}}"><view slot="content">爱情邮箱</view></cu-custom>


<view class="card light bg-{{now_color}}" >
<view class="left">
<view class="left_top">
<view class="number">5</view>
<view class="number">2</view>
<view class="number">0</view>
<view class="number">1</view>
<view class="number">3</view>
<view class="number">1</view>
<view class="number">4</view>
</view>

<view class="left_bottom" >
<view class="left_name"><text class="text_name">李海峰（收）</text></view>
<view class="left_time">2019-1-1 11:11</view>
</view>
</view>
<view class="right">
<image class="right_img" src="{{now_img}}"></image>
</view>
</view>


<view class="text_name">
选择图片
</view>

<view >

</view>

<view class="container"> 
  <view class='place block'>
    <scroll-view class="scroll-view" scroll-x>
      <view wx:for='{{img}}'  wx:key='{{index}}' data-id="{{index}}"  bindtap='change_img'>
        <image   class="{{img_flag==index?'x':''}}" data-id="{{index}}" src='{{item}}'></image>
       </view>
    </scroll-view>
  </view>

</view>

<view class="text_name">
选择模板颜色
</view>

<view class="color">
<view class="color_block" wx:for="{{color}}">
<view class="{{color_flag==index?'bx':'b'}}  light  bg-{{item}} "  data-id="{{index}}" bindtap="change_color"></view>

</view>
</view>


<view class="a" >
<button  style="width:700rpx;" class="bg-red light {{button_flag==1?'animation-scale-up':''}} "  bindtap="send">寄出</button>

</view>

wxss

.card {
  width: 95%;
  height: 300rpx;
  margin: 40rpx auto;
  border-radius: 15rpx;
  display: flex;
  flex-direction: row;
}

.left {
  width: 60%;
  display: flex;
  flex-direction: column;
}

.left_top {
  display: flex;
  flex-direction: row;
}

.left_bottom {
  height: 90%;
  margin-top: 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.left_name {
  margin-top: 100rpx;
  font-size: 36rpx;
  margin-left: 45rpx;
  font-weight: 200rpx;
}

.text_name {
  font-family: 'Lucida Sans',
                 'Lucida Sans Regular',
                 'Lucida Grande',
                 'Lucida Sans Unicode',
                 Geneva,
                 Verdana,
                 sans-serif;
  font-weight: 20rpx;
}

.left_time {
  font-size: 24rpx;
  margin-left: 40rpx;
  font-weight: 200rpx;
}

.number {
  display: flex;
  vertical-align: center; /**垂直居中*/
  justify-content: center; /**内容居中*/
  width: 50rpx;
  height: 50rpx;
  margin-left: 5%;
  margin-top: 2%;
  font-size: 40rpx;
  background: white;
  border-radius: 10rpx;
}

.right {
  width: 40%;
}
.right_img{
 margin-top: 30rpx;
 margin-left: 20rpx;
  border-radius: 10%;
  width: 240rpx;
  height: 240rpx;
}
.text_name{
  width: 95%;
  margin-left: 30rpx;
  font-weight: 800;
  font-size: 36rpx;
}




/* 热门标签 */

.place {
  padding: 12rpx 0;
  width: 100%;
  height: 280rpx;
  overflow: hidden;
}


.scroll-view {
  width: 100%;
  height: 240rpx; 
  white-space: nowrap; /* 规定段落中的文本不进行换行 */
}

.scroll-view view {
  width: 180rpx;
  height: 180rpx;
  padding: 0 16rpx;
  box-sizing: content-box;
  display: inline-block; /* 设置行内块元素 */
  position: relative;

}




.scroll-view view image {
  width: 180rpx;
  height: 180rpx;
  border-radius: 10rpx;
  opacity: 0.9;
 }


.scroll-view view  .x {
  width: 180rpx;
  height: 180rpx;
  border-radius: 10rpx;
  opacity: 0.9;
  box-shadow:0 6rpx 10rpx 2rpx #ffb12a99;/*for Android*/
  -webkit-box-shadow:0px 3px 5px 1px #ffb12a99;/*for IOS*/ 
}

.container{
 margin-left: 2.5%;
 margin-bottom: -50rpx;
 width: 95%;
}

.color{
  width: 95%;
  height: 80rpx;
  display: flex;
  flex-direction: row;
 
}
.color_block{
  margin-top: 10rpx;
  margin-left: 20rpx;
 
}

.b{
  width: 60rpx;
  height: 60rpx;
  border-radius: 20%; 

}
.bx{
  width: 60rpx;
  height: 60rpx;
  border-radius: 20%;
  box-shadow:0 6rpx 10rpx 2rpx #ffb12a99;/*for Android*/
  -webkit-box-shadow:0px 3px 5px 1px #ffb12a99;/*for IOS*/

}

.color_block active{
  background: yellow;
}


.a{
  margin-top:30rpx;
}
.a button{
  border-radius: 3%;
}
@import "../../../colorui/animation.wxss";

image[class*="gif-"] {
  border-radius: 6rpx;
  display: block;
}

// pages/mailbox/send/send.js
const db = wx.cloud.database()
var util = require('../../utils/utils.js');

Page({

  /**
   * 页面的初始数据
   */
  data: {
    color_flag:0,
    img_flag:0,
    button_flag:0,
     content:"",//评论
  now_color:"red",//当前颜色
    now_img:"https://wx3.sinaimg.cn/mw1024/006cV2kkgy1g5mx5fgynjj31kw1kw4nv.jpg",//当前图片
  img:
    ["https://wx3.sinaimg.cn/mw1024/006cV2kkgy1g5mx5fgynjj31kw1kw4nv.jpg", "https://wx3.sinaimg.cn/mw1024/006cV2kkgy1g5mx5h80w3j31kw1kw7wh.jpg","https://wx3.sinaimg.cn/mw1024/006cV2kkgy1g5mx5dtgbxj31kw1kwh5g.jpg",
    "https://wx4.sinaimg.cn/mw1024/006cV2kkgy1g5mx5if5jkj31kw1kw7wh.jpg",
    "https://wx3.sinaimg.cn/mw1024/006cV2kkgy1g5mx5k0ml1j31kw1kwkjl.jpg",
    "https://wx1.sinaimg.cn/mw1024/006cV2kkgy1g5mx5ojmg2j31kw1kw4od.jpg"
    ],
    color:[
      "red",
      "orange",
      "yellow",
      "olive",
      "green",
      "cyan",
      "blue",
      "purple",
      "mauve"
     
    ]
  
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var k=this
    console.log(options.content)
    k.setData({
      content:options.content
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },
  change_color:function(e){
    var k=this
    k.setData({
      color_flag: e.currentTarget.dataset.id,
      now_color: k.data.color[e.currentTarget.dataset.id]
    })
   },
   change_img:function(e)
   {
     var k=this
     k.setData({
       img_flag: e.currentTarget.dataset.id,
       now_img: k.data.img[e.currentTarget.dataset.id]
     })
   },
   send:function(){
     wx.showLoading({
       title: '发送中',
     })
     var k=this
     k.setData({
       button_flag:1
     })
     var time = util.formatTime(new Date());
     db.collection('mail').add({
       data: {
         time: time,//发送时间
         color:k.data.now_color,
         img:k.data.now_img,
         addressee: '',//收件人
         sender: "",//发送者
         content: k.data.content//内容
       },
       success: function (res) {
         wx.hideLoading()
         wx.navigateBack({
           delta: 1
         })
       },
       fail: console.error
     })
   }
})